Nouvelles fonctionnalités de l'historique HTML5 pushState, replaceState et la différence entre les deux compétences du didacticiel _html5

L'objet window dans le DOM permet d'accéder à l'historique du navigateur via la méthode window.history, vous permettant d'avancer et de reculer dans l'enregistrement d'accès de l'utilisateur.

À partir de HTML5, nous pouvons commencer à manipuler cette pile d'historique.

1. Historique

Utilisez les méthodes back(), forward() et go() pour avancer dans l'historique de l'utilisateur et Précédent

Avant et Précédent

Retour :

Copier le code

Le code est le suivant :

window.history.back();

Cette méthode agira comme si l'utilisateur avait cliqué sur la touche retour de la barre d'outils du navigateur.

De même, la méthode suivante peut également être utilisée pour générer le comportement de transfert de l'utilisateur :

Copier le code

Le code est le suivant :

window.history.forward();

Déplacez-vous vers une position spécifique dans l'historique

Vous peut utiliser la méthode go() pour charger une page spécifique à partir de l'historique de session.

Reculer d'une page :

Copiez le code

Le code est le suivant :

window.history.go(-1);

Avancer d'une page :

Copier le code

Le code est le suivant :

window.history.go(1);

De même, vous pouvez avancer ou revenir en arrière sur plusieurs pages.

Vous pouvez également trouver le nombre total de pages dans la pile d'historique en vérifiant la propriété length de l'historique du navigateur.

Copier le code

Le code est le suivant :

var numberOfEntries = window.history .length;

Remarque : IE prend en charge la transmission des paramètres d'URL à la méthode go().

2. Ajouter et modifier des entités d'historique

Introduit depuis Gecko2 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)

HTML5 a introduit les deux méthodes history.pushState() et history.replaceState(), qui permettent d'ajouter et de modifier des entités d'historique. En même temps, ces méthodes fonctionneront avec l'événement window.onpostate.

Utilisez la méthode history.pushState() pour modifier le référent. Cette méthode peut être utilisée dans l'en-tête http créé pour l'objet xmlhttpRequest après avoir modifié l'état. Ce référent sera l'URL du document lors de la création du XMLHttpRequest.

pushState est utilisé pour ajouter l'enregistrement de la page actuelle à l'historique, tandis que replaceState est utilisé exactement de la même manière que pushState. La seule différence est qu'il est utilisé pour modifier l'enregistrement de la page actuelle dans l'historique.

Exemple

Supposons que la page http://mozilla.org/foo.html exécute JS

Copier code

Le code est le suivant :

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

Cette méthode entraînera l'affichage de la barre d'adresse URL http://mozilla.org/bar.html, mais le navigateur ne chargera pas la page bar.html, même si cette page existe.

Maintenant, supposons à nouveau que l'utilisateur continue sur http://google.com et clique en arrière. À ce stade, la barre d'adresse URL sera http://mozilla.org/bar.html et la page recevra l'événement popstate (chrome). Cet objet d'état contiendra une copie de stateObj. Cette page ressemble à foo.html.

À ce moment-là, nous cliquons à nouveau, l'URL deviendra http://mozilla.org/foo.html et le document recevra un autre événement popstate et un objet d'état nul. Cette action de retour ne modifie pas le contenu du document. (Essayez peut-être de charger... Chrome après un moment)

méthode pushState

pushState() a trois paramètres : objet d'état, titre (maintenant ignoré et non traité), URL (facultatif). Détails spécifiques :

· Objet d'état – L'objet d'état est un objet JavaScript, qui est lié à la nouvelle entité historique créée par la méthode pushState(). Utilisé pour stocker des informations sur l'entrée que vous souhaitez insérer dans l'historique. L'objet d'état peut être n'importe quelle chaîne Json. Étant donné que Firefox utilisera le disque dur de l'utilisateur pour accéder à l'objet d'état, l'espace de stockage maximum de cet objet est de 640 Ko. Si elle est supérieure à cette valeur, la méthode pushState() lèvera une exception. Si vous avez vraiment besoin de plus d’espace de stockage, utilisez le stockage local.

· title—firefox ignore désormais ce paramètre, bien qu'il puisse être utilisé à l'avenir. Le moyen le plus sûr de l'utiliser maintenant est de passer une chaîne vide pour empêcher de futures modifications. Ou vous pouvez transmettre un titre court pour représenter l'état

· URL : ce paramètre est utilisé pour transmettre l'URL de la nouvelle entité d'historique. Notez que le navigateur ne chargera pas cette URL après avoir appelé la méthode pushState(). Mais peut-être qu'il essaiera de charger cette URL après un certain temps. Par exemple, une fois que l'utilisateur a redémarré le navigateur, la nouvelle URL peut ne pas être un chemin absolu. S'il s'agit d'un chemin relatif, il sera relatif à l'URL existante. La nouvelle URL doit être dans le même domaine que l'URL existante, sinon pushState() lèvera une exception. Ce paramètre est facultatif. S'il est vide, il sera défini sur l'URL actuelle du document.

Dans un sens, appeler la méthode pushState() est très similaire à la définition de window.location = "#foo". Les deux créeront et activeront une autre entité d'historique associée au document actuel, mais pushState(). )Il y a aussi quelques avantages :

La nouvelle URL peut être n'importe quelle URL du même domaine que l'URL actuelle. En revanche, si vous définissez uniquement le hachage, window.location restera dans le même document.

Vous n'avez pas besoin de modifier l'URL si vous n'en avez pas besoin. En revanche, définir window.location = "#foo"; génère uniquement une nouvelle entité d'historique. Si votre hachage actuel n'est pas #foo

, vous pouvez associer des données arbitraires à votre nouvelle entité d'historique. En utilisant des méthodes basées sur le hachage, toutes les données pertinentes doivent être codées dans une courte chaîne.

Notez que la méthode pushState() n'entraînera pas l'heure de changement de hachage, même si l'ancienne et la nouvelle URL n'ont que des hachages différents. La méthode

replaceState()

history.replaceState() est utilisée un peu comme pushState(), sauf que replaceState() est utilisée pour modifier l'entité historique actuelle au lieu d'en créer une nouvelle. Cette méthode est parfois utile lorsque vous devez mettre à jour un objet d'état ou l'entité d'historique actuelle en réponse à certaines actions de l'utilisateur, vous pouvez l'utiliser pour mettre à jour l'objet d'état ou l'URL de l'entité d'historique actuelle.

Événement popstate

Lorsque l'entité historique est modifiée, l'événement popstate se produit. Si l'entité d'historique est générée par les méthodes pushState et replaceState, l'attribut state de l'événement popstate contiendra une copie de l'objet d'état de l'entité d'historique

Pour plus de détails, voir window.onpopstate

Lire l'état actuel

Lire l'état existant

Lorsque la page se charge, elle peut avoir un objet d'état non vide. Cela peut se produire lorsque l'utilisateur redémarre le navigateur après que la page ait défini un objet d'état (en utilisant pushState ou replaceState). Lorsque la page se recharge, la page recevra l'événement onload, mais il n'y aura pas d'événement popstate. Cependant, si vous lisez la propriété history.state, vous obtiendrez l'objet d'état après que l'événement popstate se soit produit
var currentState = history.state
Navigateurs : testés et fonctionnels

Navigateurs HTML5

Chrome 8,9,10
Firefox 4
Safari 5
Opera 11
Safari iOS 4.3
Navigateurs HTML4

IE6,7,8,9
Firefox 3
Opera 10
Safari 4
Safari iOS avant la version 4.3

pushState et replaceState Difference

history.pushState(state, title, url)

-------------------- - ------------------------------------------------- - ---------

Ajoutez l'URL actuelle et history.state à l'historique, et remplacez l'URL actuelle par le nouvel état et l'URL. Cela n’entraînera pas l’actualisation de la page.

state : informations d'état correspondant à l'URL vers laquelle accéder.

title:

を渡す必要はありません。url: ジャンプ先の URL アドレス。ドメインを越えることはできません。

history.replaceState(状態, タイトル, URL)

-------------------------- -- ------------------------------------------------ --

現在の状態と URL を新しいものに置き換えます。ページが更新されることはありません。

state: ジャンプ先の URL に対応する状態情報。

title: 渡すことはできません。

url: ジャンプ先の URL アドレス。ドメインを越えることはできません。

------------------------------------------ ---------- ------------------------------------

あるようです両者に違いはありませんが、実際の大きな違いは、pushState は履歴レコードを追加しますが、replaceState は追加しないことです。