Compréhension approfondie des fonctionnalités d'historique dans h5 - pushState, replaceState-Tutoriel H5-php.cn

Compréhension approfondie des fonctionnalités d'historique dans h5 - pushState, replaceState

零下一度

Libérer： 2017-05-18 10:48:47

original

2944 Les gens l'ont consulté

L'objet

window dans DOM permet de lire l'historique du navigateur via la méthode window.history, vous permettant de lire l'historique du navigateur lorsque le utilisateur Avancer et reculer dans l'historique des accès.

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

1.Historique

Utilisez back(), forward(), et go() peut avancer et reculer dans l'historique de l'utilisateur

Avant et arrière

Retour :

window.history.back();

Copier après la connexion

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 :

window.history.forward();

Copier après la connexion

Se déplacer vers une position spécifique dans l'historique

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

Reculer d'une page :

window.history.go(-1);

Copier après la connexion

Avancer d'une page :

window.history.go(1);

Copier après la connexion

De même, vous pouvez avancer ou reculer de 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.

var numberOfEntries = window.history.length;

Copier après la connexion

Remarque :IE prend en charge la prise en charge La méthode go() passe le paramètre URL.

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

à partir de Gecko2Commencer à présenter (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)

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

使用history.pushState()方法来修改referrer,这种方法可以被用在经过修改状态后而为xmlhttpRequest对象创建的http header中。这个referrer会是创建XMLHttpRequest 时document的URL。

pushState 用于向 history 添加当前页面的记录，而 replaceState 和 pushState 的用法完全一样，唯一的区别就是它用于修改当前页面在 history 中的记录。

例子

假设http://mozilla.org/foo.html页面执行了一下JS

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

Copier après la connexion

这种方法将会使url地址栏显示http://mozilla.org/bar.html，但浏览器不会加载bar.html页面，即使这个页面存在也不会加载。

现在再次假设用户继续访问http://google.com，然后点击后退。这时，url地址栏将会，http://mozilla.org/bar.html，页面会得到popstate事件（chrome），这个状态对象会包含一个stateObj的copy。这个页面看起来像foo.html。+

À ce moment-là, nous cliquons à nouveau, URL deviendra http://mozilla.org/foo.html, et document obtiendra un autre événement popstate et un objet state qui est null. 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 :state Objet, titre ( est désormais ignoré et non traité ) , URL (facultatif ) . Détails spécifiques :

· stateObject – L'objet d'état est un objet JavaScript, qui est lié à l'objet créé par le pushState () méthode Nouvelle entité historique. Utilisé pour stocker des informations sur l'entrée que vous souhaitez insérer dans l'enregistrement de l'historique . L'objet State peut être n'importe quel Json String. Étant donné que firefox utilisera le disque dur de l'utilisateur pour accéder à l'objet state, l'espace de stockage maximum de cet objet est de 640k. S'il est supérieur à ce nombre 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 actuellement 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 passer un titre court pour représenter état

· URL—Ce paramètre est utilisé pour transmettre l'URL de la nouvelle entité d'historique. Le navigateur ne le fera pas. Cette URL sera chargée après avoir appelé la méthode pushState(). Mais essayez peut-être 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, alors il sera relatif à l'url existante. La nouvelle url doit être dans le même domaine que la 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 association pour l'entité history du document actuel, mais pushState() présente également quelques avantages :

l nouvelle url peut être n'importe quelle url<🎜 actuelle >url du même domaine. En revanche, si vous définissez uniquement hash, window.location restera le même <🎜. >document.

Vous n'avez pas besoin de modifier url si vous n'en avez pas besoin. En revanche, définir window.location = "#foo"; ne produit de nouvelles entités history que si votre hash actuel n'est pas #foo

l Vous pouvez associer n'importe quelle donnée à votre nouvelle historique entité. En utilisant l'approche basée sur le hachage, toutes les données pertinentes doivent être codées dans une chaîne courte.

Notez que la méthode pushState() n'effectue pas le hashchange le temps arrive, même si l'ancienne et la nouvelle url sont juste hash différentes.

Méthode replaceState()

history.replaceState() fonctionne beaucoup comme pushState(), sauf que replaceState() est utilisé pour modifier l'entité history actuelle à la place de Créer un nouveau. Cette méthode est parfois utile. Vous pouvez l'utiliser lorsque vous devez mettre à jour un objet state ou l'entité history actuelle en réponse à certaines actions de l'utilisateur. L'objet state ou l'url de l'entité history actuelle.

événement popstate

Lorsque l'entité historique est modifiée, popstate L'événement aura lieu. Si l'entité history 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 state de l'entité history

Pour plus de détails, voir fenêtre. onpopstate

读取当前的state

当页面加载时，它可能会有一个非空的state对象。这可能发生在当页面设置一个state对象(使用pushState或者replaceState)之后用户重启了浏览器。当页面重新加载，页面将收到onload事件，但不会有popstate事件。然而，如果你读取history.state属性，将在popstate事件发生后得到这个state对象