web-dev-qa-db-fra.com

Comment utiliser window.history.pushState 'en toute sécurité'

Je souhaite utiliser la fonction window.history.pushState() dans la prise en charge des navigateurs. Malheureusement, je reçois une erreur sur Firefox:

TypeError: history.pushState n'est pas une fonction

Comment est-il possible d'éviter cela?

javascripthtml5try-catch
17
Roch

La balise [try-catch] implique ce que vous connaissez déjà la réponse ... (y a-t-il quelque chose de plus spécifique?) L'autre possibilité consiste à vérifier if ( history.pushState ) history.pushState( {}, document.title, location.href );

18
Free Consulting

Bien que je ne l'aie pas testé en JavaScript, je sais que, dans d'autres langues, try-catch nécessite davantage de ressources qu'un simple ... 

Utilisation:

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

Gardez à l'esprit que lorsque vous cliquez sur le bouton Précédent, rien ne se produit réellement à moins que vous n'implémentiez window.onpopstate. Vous devrez transmettre les données dont vous avez besoin pour récupérer le contenu:

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
    };
}
23
Levi Morrison

Un module d'interface existe pour l'API d'historique. Le History.js utilise l’événement hashchange de HTML4 avec des identifiants de fragment de document pour imiter l’API d’historique des navigateurs plus anciens. Si l'une des URL de hachage est utilisée par un navigateur moderne, il utilise replaceState pour corriger silencieusement l'URL.

Si cela ne vous dérange pas que cela ne fonctionne pas dans les anciens navigateurs et que vous voulez simplement l'utiliser sans générer d'erreur, je le fais ...

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

Ceci vérifie que l'historique et la fonction pushstate existent avant d'essayer de les utiliser.

0
herostwist