prepend to url of page using javascript

Question

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.

please detail and exemplify I honestly do not understand your question. — Bogdan M., Jun 19 '19 at 08:34

Teodor Sandu · Accepted Answer · 2019-06-19T09:02:04.803

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

In order not to change the URL without loading the page is there a way to change the browsers history without causing the page to reload? — LTech, Jun 19 '19 at 18:36
@LTech generally speaking yes, but not for your initial question. There's the `window.history` API for that, the `pushState` and `replaceState` methods in it specifically. However, this API is confined to the current domain the page is loaded in, so you cannot prepend a different one. — Teodor Sandu, Jul 03 '19 at 08:27

Ziv Ben-Or · Answer 2 · 2019-06-19T09:48:25.100

0

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;

edited Jun 19 '19 at 09:48

answered Jun 19 '19 at 08:43

Ziv Ben-Or

1,149
6
15

score 0 · Answer 3 · answered Jun 19 '19 at 08:44

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);

prepend to url of page using javascript

3 Answers3