How can I use window.history.pushState 'safely'

Question

I would like to use the window.history.pushState() function in supporting browsers. Unfortunately I\'m getting an error on Firefox:

TypeError

Answer 1

A shim does exist for the History API. The History.js uses HTML4’s hashchange event with document fragment identifiers to mimic the history API in older browsers. If one of the hash URLs is used by a modern browser, it uses replaceState to quietly correct the URL.

If you're not bothered about it not working in older browsers and you just want to use it without throwing an error, I do this...

window.history && window.history.pushState && window.history.pushState("", "", url);

This checks that history and the pushstate function exist before trying to use it.

Answer 2

[try-catch] tag implies what you know the answer already... (is there anything more specific?) The other possibitity is to check if ( history.pushState ) history.pushState( {}, document.title, location.href );

Answer 3

Although I haven't tested it in JavaScript, I know in other languages that try-catch is more resource intensive than a simple if...

Use:

if(history.pushState) {
    history.pushState({"id":100}, document.title, location.href);
}

Keep in mind that when you click the back button, nothing actually happens unless you implement window.onpopstate. You'll need to pass in the data you need to grab the content:

if(history.pushState && history.replaceState) {
    //push current id, title and url
    history.pushState({"id":100}, document.title, location.href);

    //push new information
    history.pushState({"id":101}, "new title", "/new-url/");

    //this executes when you use the back button
    window.onpopstate = function(e) {
        alert(e.state.id);
        //perhaps use an ajax call to update content based on the e.state.id
    };
}