Introduction détaillée aux exemples d'utilisation de history.pushState() dans h5

Dans les fichiers HTML, la méthode history.pushState() ajoute un état à l'historique du navigateur.

pushState() prend trois paramètres : un objet d'état, un titre (maintenant ignoré) et une adresse URL facultative . Ces trois paramètres seront examinés en détail ci-dessous :

objet d'état —L'objet d'état est un objet JS créé par la méthode pushState() et lié à l'historique. Lorsque l'utilisateur est dirigé vers un nouvel état, l'événement popstate est déclenché. La propriété d'état de l'événement contient l'objet d'état de l'historique. (Note du traducteur : en bref, il stocke les chaînes JSON et peut être utilisé dans les événements popstate.) L'objet d'état peut être tout ce qui peut être sérialisé. Étant donné que Firefox stockera ces objets sur le disque de l'utilisateur, ces objets d'état seront donc restaurés après le redémarrage du navigateur par l'utilisateur, nous imposons une taille de chaîne maximale de 640 Ko sur la représentation sérialisée de l'objet d'état. Si vous transmettez un objet d'état avec une représentation sérialisée supérieure à 640 Ko à la méthode pushState(), cette méthode lèvera une exception. Si vous avez besoin de plus d'espace, il est recommandé d'utiliser sessionStorage ou localStorage.

title — Ce paramètre est désormais ignoré par Firefox et pourra être utilisé à l'avenir. Pour permettre d'éventuelles modifications futures, il est prudent de transmettre une chaîne vide. Bien sûr, vous pouvez transmettre un titre court pour l’État vers lequel vous souhaitez passer. (Note du traducteur : la plupart des navigateurs ne prennent plus en charge ou ignorent ce paramètre. Il est préférable d'utiliser null à la place)

URL — Ce paramètre fournit l'adresse du nouvel enregistrement historique. Veuillez noter que le navigateur ne chargera pas cette URL après avoir appelé la méthode pushState(), mais il pourra le faire plus tard, par exemple après que l'utilisateur aura redémarré le navigateur. La nouvelle URL ne doit pas nécessairement être une adresse absolue ; si elle est relative, elle doit l'être par rapport à 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. S'il n'est pas spécifié, il sera défini sur l'URL actuelle du document.

Remarque : De Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1) à Gecko 5.0 (Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2), les objets transférés sont sérialisés à l'aide de JSON. À partir de Gecko 6.0 (Firefox 6.0 / Thunderbird 6.0 / SeaMonkey 2.3), l'objet est sérialisé à l'aide de l'algorithme de clonage structuré. Cela permettra de transférer un objet plus diversifié.

Dans certains cas, appeler pushState équivaut à définir window.location = "#foo". Dans ce cas, les deux actions créeront et activeront un autre enregistrement d'historique lié à la page actuelle.

Mais pushState() présente d'autres avantages :

La nouvelle URL peut être n'importe quelle adresse sous la même origine que l'URL actuelle. Au contraire, définir window.location vous maintiendra sur la même page, à moins que vous ne modifiiez uniquement le hachage.

Si cela n'est pas nécessaire, vous ne pouvez pas modifier l'URL, et à la place, définissez window.location Défini sur "#foo" ; créera une nouvelle entrée d'historique uniquement si le hachage actuel n'est pas #foo.

Vous pouvez associer des données arbitraires à votre nouvelle entrée d'historique avec. l'approche basée sur le hachage, vous devez encoder toutes les données pertinentes dans une courte chaîne Vous pouvez associer n'importe quelle donnée à votre nouvel enregistrement d'historique. En utilisant une approche basée sur le hachage, vous codez toutes les données pertinentes dans une courte chaîne.

Veuillez noter que la méthode pushState() ne provoquera jamais l'activation de l'événement hashchange, même si la nouvelle URL ne diffère de l'ancienne qu'en termes de hachage.

Dans XUL, cela crée un élément XUL spécial.

Dans d'autres documents, un espace de noms URI vide sera créé.

Syntaxe EDIT

history.pushState(state, title, url);

Exemple EDIT

Crée un nouvel historique de navigateur défini par état, titre et URL.

JavaScript

var state = { 'page_id': 1, 'user_id': 5 };
var title = 'Hello World';var url = 'hello-world.html';
history.pushState(state, title, url);

【相关推荐】

1. 特别推荐：“php程序员工具箱”V0.1版本下载

2. js中的window.history的用法（一）

3. js中的window.history的用法（二）

4. 深入了解h5中history特性--pushState、replaceState

5. h5中History API 对Web应用的影响

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!