How To Change The Browser URL Without Refreshing Page – HTML5


Read {count} times since 2020

This post was suggested by Sumit Kumar Pradhan. I recently saw many questions like this on Stack Overflow. Let me start explaining, there is already a function in JavaScript to do this special task. The function is window.history.replaceState. It’s a simple function that needs 3 values.
This is actually a HTML5 function that came out on July 2012 (I think). All the latest browsers support the new function except IE 9.

Here is a small example of the usage of window.history.replaceState :

window.history.replaceState({},’subinsb.com’,’/html5′);

If someone clicks a special URL on your site, you could also change the browser URL with the URL clicked by the user. Here is a small example :

$(".link").on(‘click’,function(){
 window.history.replaceState({},’subinsb.com’,’/’+$(this).attr("href"));
 return false;
});

The return false; is used at the end of the above code to prevent the redirection of browser to the URL. window.history.pushState is similar to window.history.replaceState function.
If you want to see a demo, you can stop by here.

Show Comments