Parlons brièvement de l'utilisation de pushState et replaceState dans H5

HTML5 introduit les méthodes history.pushState() et history.replaceState(), qui peuvent respectivement ajouter et modifier des entrées d'historique. Ces méthodes sont généralement utilisées conjointement avec window.onpopstate.

Supposons que le code JavaScript suivant soit exécuté dans http://mozilla.org/foo.html :

 var stateObj = { foo: bar };history.pushState(stateObj, page 2, bar.html);

Cela entraînera la lecture de la barre d'adresse du navigateur http://mozilla.org/bar.html, mais le navigateur ne chargera pas bar.html ni même vérifiera si bar.html existe.

Supposons maintenant que l'utilisateur visite http://google.com et clique sur le bouton de retour. À ce moment-là, la barre d'adresse affichera http://mozilla.org/bar.html et la page déclenchera l'événement popstate. L'état de l'objet événement contient une copie de stateObj. La page elle-même est la même que foo.html, bien que son contenu puisse être modifié lors de l'événement popstate.

Si nous cliquons à nouveau sur le bouton Précédent, l'URL de la page deviendra http://mozilla.org/foo.html et l'objet document déclenchera un autre événement popstate. Cette fois, l'objet d'état de l'objet événement est nul. De même ici, le retour ne modifie pas le contenu du document Bien que le document puisse modifier son contenu lors de la réception de l'événement popstate, son contenu sera toujours cohérent avec la présentation précédente.

pushState() prend trois paramètres : un objet d'état, un titre (actuellement ignoré) et (facultatif) une URL. Expliquons ces trois paramètres en détail :

Objet d'état — L'état de l'objet d'état est un objet JavaScript qui crée de nouvelles entrées d'historique via pushState(). Chaque fois que l'utilisateur accède à un nouvel état, l'événement popstate est déclenché et la propriété state de l'événement contient une copie de l'objet d'état de l'entrée d'historique.

title — Ce paramètre est actuellement ignoré, mais pourra être utilisé à l'avenir. Passer une chaîne vide est sûr ici, mais dangereux à l'avenir. Alternativement, vous pouvez transmettre un titre court pour l'état de saut.

URL — Ce paramètre définit le nouvel enregistrement d'URL historique. Notez que le navigateur ne chargera pas cette URL immédiatement après avoir appelé pushState(), mais il pourra la charger ultérieurement dans certaines circonstances, par exemple lorsque l'utilisateur rouvrira le navigateur. La nouvelle URL ne doit pas nécessairement être un chemin absolu. Si la nouvelle URL est un chemin relatif, elle sera alors traitée comme relative à l'URL actuelle. La nouvelle URL doit avoir la même origine que l'URL actuelle, sinon pushState() lèvera une exception. Ce paramètre est facultatif et correspond par défaut à l'URL actuelle.

Dans un sens, appeler pushState() est similaire à définir window.location = #foo, les deux créeront et activeront un nouvel enregistrement d'historique sur la page actuelle. Mais pushState() présente les avantages suivants :

La nouvelle URL peut être n’importe quelle URL ayant la même origine que l’URL actuelle. Et la définition de window.location ne conserve le même fichier que si vous modifiez uniquement la valeur de hachage.

Si vous le souhaitez, un enregistrement d'historique peut être créé sans modifier l'URL. Le réglage de window.location = #foo; créera une nouvelle entrée d'historique uniquement si le hachage actuel n'est pas #foo.

Nous pouvons associer des données arbitraires à de nouveaux éléments de l'historique. Avec la méthode basée sur la valeur de hachage, toutes les données pertinentes doivent être codées dans une courte chaîne.

L'utilisation de history.replaceState() est très similaire à history.pushState(). La différence est que replaceState() modifie l'élément d'historique actuel au lieu d'en créer un nouveau.

Chaque fois qu'une entrée d'historique active change, l'événement popstate est déclenché sur l'objet fenêtre correspondant. Si l'entrée d'historique actuellement active a été créée par la méthode history.pushState() ou modifiée par la méthode history.replaceState(), la propriété state de l'objet d'événement popstate contient une copie de l'objet d'état de cette entrée d'historique.

Nous pouvons également obtenir l'état directement sur l'objet historique, de la manière suivante :

 var currentState = historique.state;

Il convient de noter que l’appel de history.pushState() ou history.replaceState() ne déclenchera pas l’événement popstate. L'événement opstate ne sera déclenché que sous certaines actions du navigateur, telles que cliquer sur les boutons Précédent et Suivant (ou appeler les méthodes history.back(), history.forward() et history.go() en JavaScript).

Si l'adresse actuelle de la page Web est http://example.com/example.html, exécutez le code suivant :

 window.onpopstate = function(event) { alert(location: + document.location + , state: + JSON.stringify(event.state));};//Fonction de traitement d'événements de liaison history.pushState({page: 1 } , titre 1, ?page=1); //Ajouter et activer une entrée d'historique http://example.com/example.html?page=1, l'index de l'entrée est 1history.pushState({page : 2}, titre 2, ?page=2); //Ajouter et activer une entrée d'historique http://example.com/example.html?page=2, l'index de l'entrée est 2history.replaceState({page: 3}, titre 3, ? page=3); //Modifier l'entrée d'historique actuellement activée http://ex..?page=2 en http://ex..?page=3, et l'index de l'entrée est 3history.back( //); Emplacement de la fenêtre contextuelle : http://example.com/example.html?page=1, état : {page:1}history.back(); // Emplacement de la fenêtre contextuelle : http://example.com/example.html, état : nullhistory.go(2); // Emplacement de la fenêtre contextuelle : http://example.com/example.html?page=3, état : {page:3}

Wang Er utilise pushState() principalement parce qu'il peut surveiller l'événement de retour sur le navigateur. Ceci est également applicable sur le terminal mobile. Veuillez vous référer au code suivant (peut être exécuté directement) :

 <body> <div>window.onpopstate peut surveiller l'événement de clé de retour</div> <script> history.pushState({}, ); window.onpopstate = function(event) { //Ici, vous pouvez surveiller l'événement de retour du navigateur et faites ce que vous voulez, //Par exemple : accédez à une autre page Web location.href = https://www.baidu.com };

Bien sûr, vous pouvez également utiliser window.onhashchange pour surveiller l'événement de retour sur le navigateur. Veuillez vous référer au code suivant (peut être exécuté directement) :

 <body> <div>window.onhashchange peut surveiller l'événement de clé de retour</div> <script> setTimeout(()=>{ location.hash=a },100); setTimeout(()=>{ window.onhashchange =); function(événement) { location.href = https://www.baidu.com; } },200 </script></body> ;

Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.