La fenêtre du navigateur comporte un objet historique, qui est utilisé pour enregistrer l'historique de navigation.
Si la fenêtre actuelle a visité trois URL, alors l'objet history comprend trois éléments et la propriété history.length est égale à 3.
L'objet history fournit une série de méthodes qui permettent de se déplacer entre l'historique de navigation :
window.history.back() : Passer à la page visitée précédente, équivalente à la touche retour du navigateur.
window.history.forward() : Passer à la page suivante visitée, équivalente à la touche Suivant du navigateur.
window.history.go(num) : accepte un entier comme paramètre et se déplace vers la page spécifiée par l'entier. Par exemple, go(1) est équivalent à forward() et go(-1) est équivalent à back(. ).
window.history.pushState() : HTML5 ajoute deux nouvelles méthodes à l'objet historique, window.history.pushState() et window.history.replaceState(), qui sont utilisées pour ajouter et modifier des enregistrements dans l'historique de navigation.
Remarque : 1. Si la position déplacée dépasse la limite de l'historique des accès, les trois méthodes ci-dessus ne signalent pas d'erreur, mais échouent silencieusement.
2. Lors de la configuration, 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.
Concentrons-nous sur : window.history.pushState()window.history.pushState(state, title, utl), crée une entité historique dans la page. Ajouter directement à l'historique.
Parmi les paramètres :
state : un objet d'état lié à l'URL spécifiée. Lorsque l'événement popstate est déclenché, cet objet sera transmis à la fonction de rappel. Si cet objet n'est pas nécessaire, null peut être renseigné ici.
title : Le titre de la nouvelle page, mais tous les navigateurs ignorent actuellement cette valeur, donc null peut être renseigné ici.
url : la nouvelle URL doit être dans le même domaine que la page actuelle. La barre d'adresse de votre navigateur affichera cette URL.
Remarque : La méthode pushState ne déclenchera pas d'actualisation de page, mais entraînera une modification de l'objet historique et la barre d'adresse réagira.
Exemple de mise en œuvre :HTML5 écoute et intercepte la méthode de clé de retour Android comme suit :
1. Écoutez l'événement popstate
window.addEventListener(popstate, function(){ //doSomething}, false)2. Annulez l'opération de retour par défaut, c'est-à-dire écoutez pour intercepter la clé de retour : ajoutez une entité d'historique vide en remplacement de l'entité d'historique d'origine
window.history.pushState(null, null, #);
Exemple:
<!DOCTYPE html><html> <meta name=viewport content=width=device-width> <script type=text/javascript> var count = 0; window.history.pushState(null, null, #); (popstate, function(e) { window.history.pushState(null, null, #); document.getElementById('logView').innerHTML = Les clics de l'utilisateur renvoient + (++count) }) </script><body> <p id=logView>test</p></body></html>Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.