Objet historique de nomenclature

Les mots précédents

L'objet historique enregistre l'historique de l'accès à Internet de l'utilisateur, à partir du moment où la fenêtre est ouverte. Pour des raisons de sécurité, les développeurs ne peuvent pas obtenir l'URL du navigateur de l'utilisateur, mais avec la liste des pages visitées par l'utilisateur, ils peuvent aller et venir sans connaître l'URL réelle. Cet article présentera en détail l'objet historique dans la nomenclature

longueur

La propriété history.length enregistre le nombre d'URL dans l'enregistrement de l'historique. Initialement, cette valeur est 1. Si la fenêtre actuelle a visité trois URL, la propriété history.length est égale à 3

Puisque le navigateur IE10 renvoie 2 initialement, il y a un problème de compatibilité, donc cette valeur n'est pas couramment utilisée

history.length // 初始时，该值为1history.length // 访问三个网址后，该值为3

Méthode Jump

L'objet history fournit une série de méthodes qui permettent de se déplacer entre l'historique de navigation, notamment go(), back() et forward()

[go()]

Utilisez la méthode go() pour sauter arbitrairement dans l'historique de l'utilisateur. Cette méthode reçoit un paramètre, une valeur entière représentant le nombre de pages à sauter en arrière ou en avant. Les nombres négatifs représentent un saut en arrière (similaire au bouton Précédent), les nombres positifs représentent un saut en avant (similaire au bouton Suivant)

history.go(-1history.go(1history.go(2

go() Quand la méthode n'a pas de paramètres, elle est équivalente à history.go(0), qui permet de rafraîchir la page courante

//刷新当前页面history.go();//刷新当前页面history.go(0);

[retour()]

La méthode back() est utilisée pour imiter le bouton retour du navigateur, ce qui est équivalent à history.go(-1)

[forward()]

Le forward( ) est utilisée pour imiter le bouton Suivant du navigateur, équivalent à history.go(1)

//后退一页history.back()//前进一页history.forward()

Si la position déplacée dépasse la limite d'accès history, les trois méthodes ci-dessus ne signaleront pas d'erreur. Au lieu de cela, elles échouent silencieusement

[Note] Lors de l'utilisation de l'historique, la page est généralement chargée à partir du cache du navigateur au lieu de demander à nouveau au serveur d'envoyer un nouveau. page Web

Enregistrements de modifications ajoutés

HTML5 ajoute deux nouvelles méthodes à l'objet historique, history.pushState() et history.replaceState(), qui sont utilisées pour ajouter et modifier les 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

[Remarque] Le navigateur IE9 ne prend pas en charge

[pushState()]

La méthode history.pushState() ajoute un état à l'historique du navigateur. La méthode pushState() prend trois paramètres : un objet d'état, un titre (désormais ignoré) et une adresse URL facultative

history.pushState(state, title, url);

state object —— 状态对象是一个由pushState()方法创建的、与历史纪录相关的javascript对象。
当用户定向到一个新的状态时，会触发popstate事件。事件的state属性包含了历史纪录的state对象。如果不需要这个对象，此处可以填null
title —— 新页面的标题，但是所有浏览器目前都忽略这个值，因此这里可以填null
URL —— 这个参数提供了新历史纪录的地址。新URL必须和当前URL在同一个域，否则，pushState()将丢出异常。这个参数可选，如果它没有被特别标注，会被设置为文档的当前URL

En supposant que l'URL actuelle est example.com/1.html, utilisez la méthode pushState pour ajouter un nouvel enregistrement dans l'enregistrement de navigation (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 passe pas à 2.html, ni ne vérifie même 2 .html existe, il devient simplement la dernière entrée de l'historique de navigation. Si vous visitez google.com à ce moment-là et 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

Bref, la méthode pushState ne déclenchera pas de rafraîchissement de page, mais provoquera uniquement le changement de l'objet historique et de l'adresse affichée dans la barre d'adresse pour changer

Si le paramètre url de pushState définit une nouvelle valeur d'ancrage (c'est-à-dire un hachage), l'événement hashchange ne sera pas déclenché, même si la nouvelle URL et l'ancienne ne sont différentes qu'en hachage

Si défini Si une URL inter-domaines est spécifiée, 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

// 报错history.pushState(null, null, 'https://twitter.com/hello');

[replaceState()]

Les paramètres de la méthode history.replaceState sont exactement les mêmes que ceux de la méthode pushState. La différence est que la méthode replaceState() modifiera l'entrée actuelle de l'historique au lieu de créer une nouvelle entrée

Supposons que le site Web actuel la page est example.com/example.html

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://www.php.cn/history.back()// url显示为http://www.php.cn/history.go(2)// url显示为http://www.php.cn/

[state]

　 La propriété history.state renvoie l'objet d'état du page actuelle

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

history.state// { page: 1 }

【événement popstate】

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

Il faut faire attention. Ce qui est intéressant, c'est que le simple appel de la méthode pushState ou de la méthode replaceState ne déclenchera pas cet événement. Il ne sera déclenché que lorsque l'utilisateur clique sur le bouton Précédent et Suivant du navigateur, ou. utilise javascript pour appeler les méthodes back(), forward() et go(). De plus, cet événement ne cible que le même document. Si l'historique de navigation change 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)

window.onpopstate = function (event) {
  console.log('location: ' + document.location);
  console.log('state: ' + JSON.stringify(event.state));
};

L'event.state dans le code ci-dessus 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 à travers l'objet historique Prendre

var currentState = history.state;

 

往返缓存

　　默认情况下，浏览器会在当前会话(session)缓存页面，当用户点击“前进”或“后退”按钮时，浏览器就会从缓存中加载页面

　　浏览器有一个特性叫“往返缓存”(back-forward cache或bfcache)，可以在用户使用浏览器的“后退”和“前进”按钮时加快页面的转换速度。这个缓存中不仅保存着页面数据，还保存了DOM和javascript的状态；实际上是将整个页面都保存在了内存里。如果页面位于bfcache中，那么再次打开该页面时就不会触发load事件

　　[注意]IE10-浏览器不支持

【pageshow】

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

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

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

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

(function(){    var showCount = 0;
    window.onload = function(){
        console.log('loaded');
    }
    window.onpageshow = function(e){
        e = e || event;
        showCount ++;
        console.log(e.persisted,showCount + 'times');
    }
})();

　　[注意]上面的例子使用了私有作用域，以防止变量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);
}

以上就是BOM之history对象的内容，更多相关内容请关注PHP中文网（www.php.cn）！