Analyse de l'utilisation de pushState et replaceState dans H5

Cet article présente principalement des informations pertinentes sur l'utilisation de pushState et replaceState dans H5. Le contenu est assez bon, je vais le partager avec vous maintenant et le donner comme référence.

1. Introduction

HTML5 introduit les méthodes history.pushState() et history.replaceState(), qui peuvent être ajoutées. respectivement et les entrées de l'historique des modifications. Ces méthodes sont généralement utilisées conjointement avec window.onpopstate.

2. Exemple de méthode pushState()

Supposons que le JavaScript suivant soit exécuté dans http://mozilla.org/foo. Code html :

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, ni même ne vérifiera la barre. .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 utilisé Ignorer ), et (facultatif) une URL. Expliquons les détails de ces trois paramètres :

Objet State — L'objet state state est un objet JavaScript qui crée un nouvel enregistrement d'historique via l'entrée 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 chaîne courte.

5. Méthode replaceState()

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

6. événement popstate

Chaque fois que l'entrée d'historique active change, l'événement popstate sera sur le déclencheur de l'objet fenêtre correspondant. Si l'entrée d'historique actuellement active a été créée par la méthode history.pushState() ou modifiée par la méthode history.replaceState(), la propriété state de l'objet d'événement popstate contient une copie de l'objet d'état de l'entrée d'historique.

On peut également obtenir l'état directement sur l'objet history, comme suit :

var currentState = history.state;

Il est à noter que l'appel de history.pushState() ou history.replaceState() ne déclenchera pas l'événement popstate. L'événement opstate ne sera déclenché que sous certaines actions du navigateur, telles que cliquer sur les boutons Précédent et Suivant (ou appeler les méthodes history.back(), history.forward() et history.go() en JavaScript).

7. Exemple d'événement popstate

Si l'adresse de la page Web actuelle est http://example.com/example.html, exécutez le suivant Après le code ci-dessus :

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}

8. Objectif de 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中文网！

相关推荐：

HTML5表单验证的解析

关于HTML5 input placeholder 的颜色修改

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!