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

Question

Je voudrais utiliser la fonction window.history.pushState() pour prendre en charge les navigateurs. Malheureusement, je reçois une erreur sur Firefox:

TypeError: history.pushState is not a function

Comment est-il possible d'éviter cela?

Answer 1

tag [try-catch] implique ce que vous savez déjà la réponse ... (est-il quelque chose? Plus spécifique) L'autre possibitity est de vérifier if (history.pushState) history.pushState({}, document.title, location.href);

Answer 2

Bien que je ne l'ai pas testé en JavaScript, Je sais que dans d'autres langues que try-catch est plus de ressources qu'un simple si ...

utilisation:

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

Gardez à l'esprit que lorsque vous cliquez sur le bouton de retour, rien ne se passe réellement à moins que vous implémentez window.onpopstate. Vous devez 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 
    }; 
} 

Answer 3

Il existe un shim pour l'API d'historique. Le History.js utilise l'événement hashchange de HTML4 avec des identificateurs de fragment de document pour imiter l'API d'historique dans les anciens navigateurs. Si l'une des URL de hachage est utilisée par un navigateur moderne, elle utilise replaceState pour corriger discrètement l'URL.

Si vous n'êtes pas pris la peine à ce sujet ne fonctionne pas dans les navigateurs plus anciens et que vous voulez juste utiliser sans lancer une erreur, je le fais ...

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

Cela permet de vérifier que l'histoire et la fonction de pushState exister avant d'essayer de l'utiliser.