Introduit depuis Gecko2 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)
HTML5 introduit deux méthodes, histtory.pushState() et history.replaceState(), qui permettent l’ajout et la modification d’entités historiques. En même temps, ces méthodes fonctionnent avec l’événement window.onpostate.
Modifiez le référent en utilisant la méthode history.pushState(), qui peut être utilisée dans l’en-tête http créé pour l’objet xmlhttpRequest après la modification de l’état. Ce référent sera l’URL du document lors de la création de la requête XMLHttp.
pushState est utilisé pour ajouter un enregistrement de la page courante à l’historique, tandis que replaceState et pushState sont utilisés exactement de la même façon, la seule différence étant qu’il sert à modifier l’enregistrement de la page actuelle dans l’historique.
exemple
Supposons que http://mozilla.org/foo.html page exécute JS
var stateObj = { foo : « bar » } ; history.pushState(stateObj, « page 2 », « bar.html ») ;
Cette méthode fera apparaître la barre d’adresse URL http://mozilla.org/bar.html,Mais le navigateur ne charge pas bar.html page, même si elle existe。
Supposons maintenant que l’utilisateur continue d’accéder à la http://google.com et recule. À ce moment-là, la barre d’adresse URL recevra http://mozilla.org/bar.html la page un événement popstate (chrome), qui contiendra une copie de stateObj. Cette page ressemble à foo.html. +
À ce moment-là, nous recliquons en arrière, et l’URL se transforme http://mozilla.org/foo.html,document apparaît un autre événement popstate et un objet état nul. Cette action de retour ne modifie pas le contenu du document. (Peut-être qu’après un moment il essaiera de charger...) chrome)
Méthode pushState
pushState() a trois paramètres : objet état, titre (désormais ignoré, non traité), URL (optionnel). Détails :
· objet état – L’objet état est un objet Javascrip{filter}t qui se rapporte à une nouvelle entité d’historique créée par la méthode pushState(). Utilisé pour stocker les informations sur les entrées que vous souhaitez insérer dans l’historique. L’objet d’état peut être n’importe quelle chaîne Json. Comme Firefox utilise le disque dur de l’utilisateur pour accéder à l’objet d’état, l’espace de stockage maximal de cet objet est de 640k. Si elle est supérieure à cette valeur, la méthode pushState() lance une exception. Si vous avez besoin de plus d’espace pour stocker, utilisez un stockage local.
· titre — Firefox ignore désormais ce paramètre, bien qu’il puisse être utilisé à l’avenir. La façon la plus sûre de l’utiliser maintenant est de passer une ficelle vide pour éviter de futures modifications. Ou vous pouvez utiliser un titre court pour indiquer l’État
· URL - Ce paramètre est utilisé pour passer l’URL de la nouvelle entité historique, notez que le navigateur ne chargera pas cette URL après avoir appelé la méthode pushState(). Mais peut-être qu’après un moment, il essaiera de charger cette URL. Par exemple, après que l’utilisateur a redémarré le navigateur, la nouvelle URL peut ne pas être un chemin absolu. Si c’est un chemin relatif, alors il sera relatif à l’URL existante. La nouvelle URL doit être co-domaine avec l’URL existante, sinon pushState() lancera une exception. Ce paramètre est optionnel, et s’il est vide, il sera placé comme URL actuelle du document.
En un sens, appeler la méthode pushState() est un peu comme définir window.locatio{filter}n = « #foo », qui créent et activent toutes deux une autre entité d’historique associée au document en cours, mais pushState() présente quelques avantages supplémentaires :
La nouvelle URL peut être n’importe quelle URL dans le même domaine que l’URL actuelle, contrairement à window.locatio{filter}n qui reste dans le même document si seul le hachage est défini.
L Vous pouvez laisser l’URL non modifiée si ce n’est pas nécessaire. Pour comparaison, définissez window.locatio{filter}n = « #foo » ; Seules de nouvelles entités d’historique sont générées, si votre hachage actuel n’est pas #foo
Vous pouvez associer des données arbitraires à votre nouvelle entité historique. Avec une approche basée sur le hachage, toutes les données pertinentes doivent être encodées dans une courte chaîne.
Notez que la méthode pushState() ne fait pas en sorte que le temps de changement de hachage se produise, même si les anciennes et nouvelles URLs ne sont que des hachages différents.
méthode replaceState()
history.replaceState() est utilisé de manière similaire à pushState(), sauf que replaceState() sert à modifier l’entité d’historique courante au lieu d’en créer une nouvelle. Cette méthode peut parfois être utile lorsque vous devez mettre à jour un objet d’état ou l’entité d’historique courante en réponse à certains comportements de l’utilisateur, et vous pouvez l’utiliser pour mettre à jour l’URL de l’objet d’état ou de l’entité d’historique courant.
Événement Popstate
Lorsque l’entité historique est modifiée, l’événement d’état pop-state se produit. Si l’entité historique est générée par les méthodes pushState et replaceState, l’attribut état de l’événement popstate contiendra une copie de l’objet état de l’entité historique
Voir window.onpopstate pour plus de détails
Lire l’état actuel
Lire l’état actuel
Lorsque la page se charge, elle peut avoir un objet d’état non vide. Cela peut se produire lorsque la page définit un objet d’état (en utilisant pushState ou replaceState) et que l’utilisateur redémarre le navigateur. Lorsque la page se recharge, elle reçoit un événement d’onloading, mais il n’y aura pas d’événement popstate. Cependant, si vous lisez la propriété history.state, vous obtiendrez cet objet état après que l’événement popstate se produise
Historique.pushState() documentation : https://developer.mozilla.org/zh-CN/docs/Web/API/History/pushState
Le paramètre de l’URL réceptrice est de type string, qui sert à modifier l’URL de la barre d’adresses courante. Une chose à noter est que ce paramètre ne peut pas être le même que le cross-domaine, c’est-à-dire que le protocole, le nom de domaine et le port doivent être identiques.
DOMException non capturée : Échec d’exécution de 'pushState' sur 'History' : Un objet historique avec URL 'http://www.test.com/' ne peut pas être créé dans un document d’origine ' https://www.itsvse.com' et URL 'https://www.itsvse.com/'.
à <anonymous>:1:9
Code correct :
|
Publié sur 12/09/2017 13:55:04
|
|
|
|
Publié sur 27/10/2017 09:51:10