javascripturlhtml5-historyfragment-identifierhashchange

Change the URL in the browser without loading the new page using JavaScript

How would I have a JavaScript action that may have some effects on the current page but would also change the URL in the browser so if the user hits reload or bookmark, then the new URL is used?

It would also be nice if the back button would reload the original URL.

I am trying to record JavaScript state in the URL.

Solution

  • With HTML 5, use the history.pushState function. As an example:

    <script type="text/javascript">
var stateObj = { foo: "bar" };
function change_my_url()
{
   history.pushState(stateObj, "page 2", "bar.html");
}
var link = document.getElementById('click');
link.addEventListener('click', change_my_url, false);
</script>

    and a href:

    <a href="#" id='click'>Click to change url to bar.html</a>

    If you want to change the URL without adding an entry to the back button list, use history.replaceState instead.