Search code examples
javascripturlparametersurl-rewritingaddress-bar

How to remove parameters in URL and display it in address bar without causing redirect in Javascript?

I have found numerous answers on how to extract the URL without the parameters.

How do you rewrite the URL in the address bar without causing the page to reload with the new URL?

shortURL = top.location.href.substring(0, top.location.href.indexOf('?'));
top.location.href = shortURL // Causes redirect

The goal is to extract the parameters in Javascript but not display them in the address bar.

Solution

  • In modern browsers with support for the History object, you can use either history.replaceState() or history.pushState() to change the current URL without changing the current page. There are limitations on what you can change (for example, you cannot change the domain/origin this way for security reasons).

    See here for a summary of these methods.

    The browser history is a recording of where you have been in your browsing session. .replaceState() allows you to replace the current item in the history list with a different one. .pushState() adds a new item to the browser history and both change the URL displayed in the browser URL bar without reloading the page. You select which method to use depending upon how you want the browser's "back" button to behave for this particular page entry.

    Note: These APIs are supported in IE 10 and later.

    In older browser versions without support for the history API, the only part of the URL you can change without reloading the page is the hash tag (the part after a # symbol) at the end of the URL.