CODEWITHSUNDEEP
javascript
LTech
LTech

Reputation: 1761

prepend to url of page using javascript

I need all blog product pages to show in a popup. In order to show in the popup their url must be in the form https://expample.com?/modal-link=blog_page_url. (I'm using the plugin and this is the requirement)
I would like to write a code in javascript that checks the URL. If the URL of the page contains the word 'product' I would like prepend to the url: https://expample.com?/modal-link= inorder to enable it to be shown in a popup. I'm using the code below: 

if(window.location.href.indexOf("product") > -1) {
  var url = window.location.href;    
  url_new = 'https://example.com/?modal-link=' + url
} else {

}
window.location.href = url_new;

The is creating a new URL but it is causing it to be added an infinite amount of time. How should I be doing this?

Follow on question: (should I open a new question for this?)

I would like to adapt the code so the page does not reload during the redirect. I know there are other posts about this eg How do I modify the URL without reloading the page? or https://stackoverflow.com/questions/3338642/updating-address-bar-with-new-url-without-hash-or-reloading-the-pagebut could someone please help me modify my javascript code for this specific case? Would I need to use the lines below? 

document.location.hash = 'afterhash';
history.pushState('data to be passed', 'Title of the page', '/test');

I'm at a loss which part of my code need to go where in the above lines.

Upvotes: 0

Views: 504

Answers (3)

Ziv Ben-Or
Ziv Ben-Or

Reputation: 1194

You should initilize the url_new and change it for some condition:

let url_new = window.location.href

if(window.location.href.indexOf("product") > -1) {
    url_new = 'https://example.com/?modal-link=' + window.location.href;
} 
window.location.href = url_new;

Upvotes: 0

Teodor Sandu
Teodor Sandu

Reputation: 1352

Your recursion is missing a stop condition. For example, if "some_product" contains "product" and you prepend anything to it, it will still contain "product", as in "really_some_product", "really_really_some_product", etc. You can see where this is going, infinite recursion.

So, you need to tell it to stop at some point, which is when the new url already starts with what you intend to prepend to the original one.

Following this, since there's a case in which we don't change anything, we should also not redirect.

var url = window.location.href,
    prepend_to_url = "https://example.com/?modal-link=",
    url_new = false;

if (url.indexOf(prepend_to_url) == 0) {
    // url starts with what we prepend
    // so do nothing
} else if(url.indexOf("product") > -1) {
    url_new = prepend_to_url + url;
}

if (url_new) { // don't redirect unless we've done something above
    window.location.href = url_new;
}

A more concise version of the code above could look like this:

var url = window.location.href,
    prepend_to_url = "https://example.com/?modal-link=",
    url_new = false;

if (url.indexOf(prepend_to_url) == -1  // url doesn't start with what we prepend
    && url.indexOf("product") > -1     // and our condition is met
) {
    url_new = prepend_to_url + url;
}

url_new && (window.location.href = url_new); // equivalent to an "if" statement

Upvotes: 1

Andam
Andam

Reputation: 2167

What you need is to get the query parameter part of the url by using substr with index of ? to the end of the url 

var url_new;
if(window.location.href.indexOf("product") > -1) {
  var url = window.location.href.substr(window.location.href.indexOf("?") +1, window.location.href.length);    
  var newValue = 10;
  url_new = 'https://example.com/?modal-link=' + newValue + "&" + url
}
console.log(url_new);

Upvotes: 0

Related Questions