66

I know this has been asked many times before but answers were not descriptive enough to solve my problem. I don't want to change the whole URL of page. I want to append a parameter &item=brand on button click without refresh.

Using document.location.search += '&item=brand'; makes the page refresh.

Using window.location.hash = "&item=brand"; append without refresh but with a hash # which eliminates the usage/effect of the parameter. I tried to remove the hash after appending but that didn't work.

This answer and many others suggest the use of HTML5 History API, specifically the history.pushState method, and for old browsers is to set a fragment identifier to prevent page from reloading. But how?

Assuming the URL is: http://example.com/search.php?lang=en

How can I append &item=brand using HTML5 pushState method or a fragment identifier so the output would be like this: http://example.com/search.php?lang=en&item=brand without a page refresh?

I hope someone can throw some light on how to use the HTML5 pushState to append a parameter to an existing/current URL. Or alternatively how to set a fragment identifier for the same purpose. A good tutorial, demo or piece of code with a little explanation would be great.

Demo of what I've done so far. Your answers would be greatly appreciated.

Community
  • 1
  • 1
Mina Hafzalla
  • 2,121
  • 7
  • 25
  • 39

5 Answers5

113

You can use the pushState or replaceState methods, i.e.:

window.history.pushState("object or string", "Title", "new url");

OR

window.history.replaceState(null, null, "?arg=123");

Example with argument:

var refresh = window.location.protocol + "//" + window.location.host + window.location.pathname + '?arg=1';    
window.history.pushState({ path: refresh }, '', refresh);
Pedro Lobito
  • 75,541
  • 25
  • 200
  • 222
  • 1
    Thank you so much! that worked, but surprisingly the parameter didn't apply into the system. However, it take effect when I add it manually into the URL. I will take this as an accepted answer as it solves my main question but please if you have a suggestion on why the parameter won't be applied to system when added using the `history.pushState` please tell me :) Thank you again. – Mina Hafzalla Sep 28 '15 at 17:59
  • 7
    Thanks, I ending up using window.history.replaceState(null, null, "?mock"); To add a url param without reload. – rustycode Oct 19 '17 at 17:28
  • Browser compatibility is [somewhat good](https://caniuse.com/?search=pushState), but note that it won't work for below IE10 or (potentially) some mobile browsers. – Redwolf Programs Sep 24 '20 at 19:57
24

If anyone wants to add a parameter to a more complex url (I mean, https://stackoverflow.com/questions/edit?newParameter=1), the following code worked for me:

var newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?newParameter=1';
window.history.pushState({ path: newurl }, '', newurl);

Hope this helps!

pablobascones
  • 249
  • 2
  • 6
8

You can also use URL API if you want to add and remove params at the same time:

const url = new URL(window.location.href);
url.searchParams.set('param1', 'val1');
url.searchParams.delete('param2');
window.history.replaceState(null, null, url); // or pushState
Yarrow
  • 91
  • 2
  • 4
0

export function getHash(hash: string, key: string): string | undefined {
  return hash
    .split("#")
    .find((h) => h.startsWith(key))
    ?.replace(`${key}=`, "");
}
export function setHash(hash: string, key: string, value: string): string {
  let hashArray = hash.split("#").filter((h) => !h.startsWith(key));
  hashArray.push(`${key}=${value}`);
  return hashArray.length > 0
    ? hashArray.reduce((s1, s2) => `${s1}#${s2}`)
    : "";
}
export function deleteHash(hash: string, key: string): string {
  let hashArray = hash.split("#").filter((h) => !h.startsWith(key));
  return hashArray.length > 0
    ? hashArray.reduce((s1, s2) => `${s1}#${s2}`)
    : "";
}
user12535483
  • 1
0

Modified Medhi answer and this did the trick

const insertParam = (key: string, value: string) => {
    key = encodeURIComponent(key);
    value = encodeURIComponent(value);

    let kvp = window.location.search.substr(1).split('&');
    if (kvp[0] === '') {
        const path = window.location.protocol + "//" + window.location.host + window.location.pathname + '?' + key + '=' + value;
        window.history.pushState({ path: path }, '', path);

    } else {
        let i = kvp.length; let x; while (i--) {
            x = kvp[i].split('=');

            if (x[0] === key) {
                x[1] = value;
                kvp[i] = x.join('=');
                break;
            }
        }

        if (i < 0) { 
            kvp[kvp.length] = [key, value].join('=');
        }

        const refresh = window.location.protocol + "//" + window.location.host + window.location.pathname + '?' + kvp.join('&');  
        window.history.pushState({ path: refresh }, '', refresh);
    }
}
Banobe Pascal
  • 1