Explication détaillée des étapes d'utilisation de pushState et replaceState

Cette fois, je vais vous donner une explication détaillée des étapes d'utilisation de pushState et replaceState Quelles sont les précautions lors de l'utilisation de pushState et replaceState. Voici des cas pratiques, jetons un coup d'œil.

1. Introduction

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

2. Exemple de méthode pushState()

Supposons que ce qui suit soit exécuté dans http://mozilla.org/foo.htmlJavaScript Code :

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

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

Supposons que l'utilisateur visite maintenant 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.

3. La méthode pushState()

pushState() nécessite trois paramètres : un objet d'état, un titre (actuellement ignoré) et ( facultatif) une URL. Expliquons les détails de ces trois paramètres :

Objet State — L'objet state state est un Objet JavaScript, créé par l'entrée de l'historique 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.

Titre — 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.

4. La différence entre la méthode pushState() et la définition de la valeur de hachage

Dans un sens, appeler pushState() et définir l'emplacement de la fenêtre. = "#foo" est similaire, 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 le hachage.

Si nécessaire, vous pouvez créer un enregistrement d'historique sans modifier l'URL. Le réglage de window.location = "#foo" ; créera un nouvel élément 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.

5. Méthode replaceState()

L'utilisation de history.replaceState() est très similaire à history.pushState(), la différence is replaceState() modifie l'élément d'historique actuel plutôt que d'en créer un nouveau.

6. événement popstate

每当处于激活状态的历史记录条目发生变化时,popstate 事件就会在对应window对象上触发。 如果当前处于激活状态的历史记录条目是由history.pushState()方法创建,或者由history.replaceState()方法修改过的, 则popstate事件对象的state属性包含了这个历史记录条目的state对象的一个拷贝。

我们也可以直接在history对象上获取state，如下：

var currentState = history.state;

需要注意的是，调用 history.pushState() 或者 history.replaceState() 不会触发 popstate 事件。 opstate事件只会在浏览器某些行为下触发， 比如点击后退、前进按钮(或者在JavaScript中调用history.back()、history.forward()、history.go()方法)。

七、popstate 事件的例子

假如当前网页地址为 http://example.com/example.html ,则运行下述代码后:

window.onpopstate = function(event) {
  alert("location: " + document.location + ", state: " + JSON.stringify(event.state));
};
//绑定事件处理函数. 
history.pushState({page: 1}, "title 1", "?page=1");    //添加并激活一个历史记录条目 http://example.com/example.html?page=1,条目索引为1
history.pushState({page: 2}, "title 2", "?page=2");    //添加并激活一个历史记录条目 http://example.com/example.html?page=2,条目索引为2
history.replaceState({page: 3}, "title 3", "?page=3"); //修改当前激活的历史记录条目 http://ex..?page=2 变为 http://ex..?page=3,条目索引为3
history.back(); // 弹出 "location: http://example.com/example.html?page=1, state: {"page":1}"
history.back(); // 弹出 "location: http://example.com/example.html, state: null
history.go(2);  // 弹出 "location: http://example.com/example.html?page=3, state: {"page":3}

八、pushState()的用途

王二使用 pushState() 主要是它可以监听到浏览器上的返回事件，这在移动端上也同样适用，参考如下一段代码(可以直接运行）：

<body>
    <p>window.onpopstate可以监听到返回键事件</p>
    <script>
        history.pushState({}, ""); 
        window.onpopstate = function(event) {
            //这里可以监听到浏览器的返回事件，并做你想做的事情，
            //例如：跳转到另一个网页
            location.href = "https://www.baidu.com";
        };
    </script>
</body>

当然，用 window.onhashchange 也可以监听到浏览器上的返回事件，参考如下一段代码(可以直接运行）：

<body>
    <p>window.onhashchange可以监听到返回键事件</p>
    <script>
        setTimeout(()=>{
            location.hash="a"
        },100);
        setTimeout(()=>{
            window.onhashchange = function(event) {
                location.href = "https://www.baidu.com";
            }
        },200);
    </script>
</body>

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

H5+WebWorkers多线程开发使用详解

CSS3二级导航菜单制作步骤详解

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!