Méthodes permettant à pushstate et popstate d'exploiter les URL

Cette fois, je vais vous expliquer comment utiliser les URL pushstate et popstate. Quelles sont les précautions pour utiliser les URL pushstate et popstate. Voici des cas pratiques.

1. Comprendre window.history

window.history représente l'historique de l'objet window, qui est initié par l'utilisateur Génère et accepte des objets globaux contrôlés par des scripts javascript. L'objet window permet d'accéder à l'historique du navigateur via l'objet history. Il expose quelques méthodes et propriétés très utiles qui vous permettent d'avancer et de reculer librement dans l'historique.

1. Avancer et reculer dans l'histoire

Pour remonter dans l'histoire, vous pouvez faire ceci :

window.history.back();

C'est comme l'utilisateur en cliquant sur le même bouton que le bouton Précédent du navigateur.

De même, vous pouvez avancer, tout comme en cliquant sur le bouton Suivant dans le navigateur, comme ceci :

 window.history.forward();

2. Accédez au point d'historique spécifié

Vous pouvez utiliser la méthode go() pour charger une page à partir de l'historique de la session en cours en spécifiant une valeur relative à la position actuelle de la page (la position actuelle de la pageindexla valeur est 0, la page précédente c'est -1, et la page suivante est 1).

Pour reculer d'une page (équivalent à rappeler()) :

 window.history.go(-1);

Pour avancer d'une page (équivalent à rappeler()) :

window.history.go(1);

De même, en passant le paramètre "2", vous pouvez avancer de 2 points d'enregistrement. Vous pouvez vérifier la valeur de l'attribut de longueur pour savoir combien de points d'enregistrement il y a dans la pile d'historique :

window.history.length;

2. Modifier les points d'enregistrement de l'historique

La nouvelle API HTML5 étend window.history, rendant les points d'historique plus ouverts. Vous pouvez stocker le point d'enregistrement historique actuel, remplacer le point d'enregistrement historique actuel et surveiller le point d'enregistrement historique. Ce qui suit est une brève description de chacun.

1. Stockez le point d'historique actuel

La méthode de stockage est similaire au push du tableau (Array.push()), ajoutez-en un nouveau dans la fenêtre .history Points d'enregistrement historique, par exemple :

// 当前的url为：http://qianduanblog.com/index.html
var json={time:new Date().getTime()};
// @状态对象：记录历史记录点的额外对象，可以为空
// @页面标题：目前所有浏览器都不支持
// @可选的url：浏览器不会检查url是否存在，只改变url，url必须同域，不能跨域
window.history.pushState(json,"","http://qianduanblog.com/post-1.html");

Après avoir exécuté la méthode pushState, l'adresse URL de la page est http://qianduanblog.com/post-1.html.

2. Remplacer le point d'historique actuel

window.history.replaceState est similaire à window.history.pushState, la différence est que replaceState ne sera pas dans la fenêtre. history L'effet de l'ajout d'un nouveau point d'enregistrement historique est similaire à window.location.replace(url), qui n'ajoutera pas de nouveau point d'enregistrement au point d'enregistrement historique. La méthode replaceState() est particulièrement appropriée lorsque vous souhaitez mettre à jour l'objet d'état ou l'URL de l'entrée actuelle de l'historique en réponse à une action de l'utilisateur.

3. Surveillance des points d'enregistrement de l'historique

La surveillance des points d'enregistrement de l'historique peut être intuitivement considérée comme une surveillance des modifications d'URL, mais la partie de hachage de l'URL sera ignorée. partie de hachage, HTML5 a une nouvelle API appelée onhashchange. Cette méthode et des solutions compatibles entre navigateurs sont également mentionnées dans mon blog. Vous pouvez utiliser window.onpopstate pour surveiller les modifications dans l'URL et obtenir l'objet d'état stocké au point d'enregistrement historique, qui est l'objet json mentionné ci-dessus, tel que :

// 当前的url为：http://qianduanblog.com/post-1.html
window.onpopstate=function()
{
    // 获得存储在该历史记录点的json对象
    var json=window.history.state;
    // 点击一次回退到：http://qianduanblog.com/index.html
    // 获得的json为null
    // 再点击一次前进到：http://qianduanblog.com/post-1.html
    // 获得json为{time:1369647895656}
}

Il convient de noter : L'événement onpopstate ne sera pas déclenché lorsque le script javascript exécute window.history.pushState et window.history.replaceState.

Une autre chose à noter est que Google Chrome et Firefox réagissent différemment lors de la première ouverture de la page. Google Chrome déclenche étrangement l'événement onpopstate, alors que Firefox ne le fait pas.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment changer le code de l'url actuelle sans actualiser

Comment utiliser LocalStorage de H5 en local Valeur d'actualisation du magasin

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!