Maison > Article > interface Web > Introduction détaillée de l'historique des opérations pushstate et popstate de HTML5 pour modifier l'URL actuelle sans actualiser
Cet article présente principalement l'historique des opérations pushstate et popstate de HTML5, et les informations pertinentes sur la modification de l'URL actuelle sans actualiser. Les amis dans le besoin peuvent se référer à
<.> 1. Comprendre window.history
window.history représente l'historique de l'objet window, qui est activement généré par l'utilisateur et accepte le javascript scripts Contrôle l'objet global. 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 cliquer sur le bouton Retour
du navigateur est le même.
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
1. Stockez le point d'enregistrement historique actuel
tableau sur la pile ( Array.push()), ajouter un point d'enregistrement d'historique dans window.history, 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 qianduanblog.com /post-1.html.
2. Remplacer le point d'historique actuel
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 historiques
// 当前的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 Une autre chose à noter est que Google Chrome et
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!