Comment utiliser l'objet History en javascript

length

　La propriété history.length enregistre le nombre d'URL dans l'historique. Initialement, cette valeur est 1. Étant donné que le navigateur IE10+ renvoie 2 initialement, il y a un problème de compatibilité, donc cette valeur n'est pas couramment utilisée

Méthode Jump

　go(), back() et forward()

　Si la position déplacée dépasse la limite de l'historique d'accès, les trois méthodes ci-dessus ne signalent pas d'erreurs, mais échouent silencieusement

[Remarque] Lors de l'utilisation des enregistrements d'historique, la page est généralement chargée à partir du cache du navigateur au lieu de demander à nouveau au serveur d'envoyer une nouvelle page Web. Ne déclenche pas le chargement

Ajouter et modifier des enregistrements

HTML5 ajoute deux nouvelles méthodes à l'objet historique, history.pushState() et history.replaceState(), qui sont utilisées pour ajouter et modifier des enregistrements dans l'historique de navigation. L'attribut state est utilisé pour enregistrer l'objet d'enregistrement, tandis que l'événement popstate est utilisé pour surveiller les modifications dans l'objet historique. un état à l'historique du navigateur. La méthode pushState() prend trois paramètres : un objet d'état, un titre (maintenant ignoré) et une adresse URL facultative

　　 history.pushState(state, title, url);

　　objet d'état - l'objet d'état est un objet JavaScript lié à l'historique créé par la méthode pushState(). 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. Si vous n'avez pas besoin de cet objet, vous pouvez remplir null

　　title - le titre de la nouvelle page, mais tous les navigateurs ignorent actuellement cette valeur, vous pouvez donc remplir null

　　URL - ce paramètre fournit l'adresse du nouveau record historique. La nouvelle URL doit être dans le même domaine que l'URL actuelle, sinon pushState() lèvera une exception. Ce paramètre est facultatif. S'il n'est pas spécifiquement marqué, il sera défini sur l'URL actuelle du document. En supposant que l'URL actuelle soit example.com/1.html, utilisez la méthode pushState pour ajouter un nouvel enregistrement à la navigation. record (objet historique).

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

　　Après avoir ajouté le nouvel enregistrement ci-dessus, la barre d'adresse du navigateur affiche immédiatement example.com/2.html, mais elle ne passera pas à 2.html, et ne vérifiera même pas si 2.html existe. Il deviendra simplement le dernier enregistrement de . Si vous visitez google.com à ce moment-là, puis cliquez sur le bouton Précédent, l'URL de la page affichera 2.html, mais le contenu sera toujours le 1.html d'origine. Cliquez à nouveau sur le bouton de rembobinage et l'url affichera 1.html avec le même contenu. En bref, la méthode pushState ne déclenchera pas d'actualisation de page, mais entraînera uniquement le changement de l'objet historique et l'adresse d'affichage de la barre d'adresse. change. Si le paramètre url de pushState, la définition d'une nouvelle valeur d'ancrage (c'est-à-dire le hachage) ne déclenchera pas l'événement hashchange, même si la nouvelle URL et l'ancienne ne sont différentes qu'en termes de hachage

　　Si une URL inter-domaines est définie, une erreur sera signalée. Le but de cette conception est d'empêcher un code malveillant de faire croire aux utilisateurs qu'ils se trouvent sur un autre site Web

　　【replaceState()】

　 Les paramètres de la méthode history.replaceState sont exactement les mêmes que ceux de la méthode pushState. La méthode replaceState() modifiera les entrées actuelles de l'historique au lieu de créer de nouvelles entrées. page

history.pushState({page: 1}, 'title 1', '?page=1');
history.pushState({page: 2}, 'title 2', '?page=2');
history.replaceState({page: 3}, 'title 3', '?page=3');
history.back()
// url显示为http://example.com/example.html?page=1
history.back()
// url显示为http://example.com/example.html
history.go(2)
// url显示为http://example.com/example.html?page=3

　【événement popstate】

　Chaque Lorsque l'historique de navigation (c'est-à-dire l'objet historique) du même document change, l'événement popstate sera déclenché

　 [Note] Il convient de noter que le simple appel de la méthode pushState ou de la méthode replaceState ne déclenchera pas cet événement, seul l'utilisateur clique pour parcourir. Il ne sera déclenché que lorsque vous appuierez sur le bouton Précédent et Suivant, ou que vous utiliserez javascript pour appeler les méthodes back(), forward() ou go(). De plus, cet événement ne cible que le même document. Si l'historique de navigation est modifié et que différents documents sont chargés, l'événement ne sera pas déclenché. Lorsqu'il est utilisé, vous pouvez spécifier une fonction de rappel pour l'événement popstate. Le paramètre de cette fonction de rappel est un objet événement, et son attribut state pointe vers l'objet state fourni par les méthodes pushState et replaceState pour l'URL actuelle (c'est-à-dire le premier paramètre de ces deux méthodes)

　Event.state dans le ci-dessus, c'est l'objet d'état lié à l'URL actuelle via les méthodes pushState et replaceState

Cet objet d'état peut également être lu directement via l'objet historique

history.pushState({page: 1}, 'title 1', '?page=1');
history.state// { page: 1 }

Cache aller-retour

Par défaut, le navigateur mettra la page en cache dans la session (session) en cours, lorsque l'utilisateur clique sur le bouton "avancer" ou "retour", le navigateur chargera la page à partir du cache

Le navigateur dispose d'une fonctionnalité appelée "cache arrière-avant" (cache arrière-avant ou bfcache), qui peut être utilisé lorsque l'utilisateur utilise le navigateur. Les boutons « Précédent » et « Suivant » accélèrent les transitions de page. Ce cache enregistre non seulement les données de la page, mais enregistre également l'état du DOM et du javascript ; en fait, la page entière est enregistrée en mémoire ; Si la page est dans bfcache, l'événement de chargement ne sera pas déclenché lorsque la page sera à nouveau ouverte

　[Note] IE10 - le navigateur ne prend pas en charge

　【pageshow】

　　pageshow事件在页面加载时触发，包括第一次加载和从缓存加载两种情况。如果要指定页面每次加载(不管是不是从浏览器缓存)时都运行的代码，可以放在这个事件的监听函数

　　第一次加载时，它的触发顺序排在load事件后面。从缓存加载时，load事件不会触发，因为网页在缓存中的样子通常是load事件的监听函数运行后的样子，所以不必重复执行。同理，如果是从缓存中加载页面，网页内初始化的JavaScript脚本(比如DOMContentLoaded事件的监听函数)也不会执行

　　[注意]虽然这个事件的目标是document，但必须将其事件处理程序添加到window

　　pageshow事件有一个persisted属性，返回一个布尔值。页面第一次加载时或没有从缓存加载时，这个属性是false；当页面从缓存加载时，这个属性是true

　　[注意]上面的例子使用了私有作用域，以防止变量showCount进入全局作用域。如果单击了浏览器的“刷新”按钮，那么showCount的值就会被重置为0，因为页面已经完全重新加载了

　　【pagehide】

　　与pageshow事件对应的是pagehide事件，该事件会在浏览器卸载页面的时候触发，而且是在unload事件之前触发。与pageshow事件一样，pagehide在document上面触发，但其事件处理程序必须要添加到window对象

　　[注意]指定了onunload事件处理程序的页面会被自动排除在bfcache之外，即使事件处理程序是空的。原因在于，onunload最常用于撤销在onload中所执行的操作，而跳过onload后再次显示页面很可能就会导致页面不正常

　　pagehide事件的event对象也包含persisted属性，不过其用途稍有不同。如果页面是从bfcache中加载的，那么persisted的值就是true；如果页面在卸载之后会被保存在bfcache中，那么persisted的值也会被设置为true。因此，当第一次触发pageshow时，persisted的值一定是false，而在第一次触发pagehide时，persisted就会变成true(除非页面不会被保存在bfcache中)

window.onpagehide = function(e){
e = e || event;
console.log(e.persisted);
}

使用方法：

1、取消默认的返回操作

function pushHistory(){
 var state = {
    title: "title",
    url: "#"   
  }
 window.history.pushState(state, "title", "#");  
}

pushHistory()

2、history.js用于兼容html4，也可以监听pushState与replaceSate

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!