Introduction détaillée de l'historique des opérations pushstate et popstate de HTML5 pour modifier l'URL actuelle sans actualiser-Tutoriel H5-php.cn

Introduction détaillée de l'historique des opérations pushstate et popstate de HTML5 pour modifier l'URL actuelle sans actualiser

黄舟

Libérer： 2017-05-14 17:53:49

original

2150 Les gens l'ont consulté

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();

Copier après la connexion

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();

Copier après la connexion

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 page

indexla 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);

Copier après la connexion

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

window.history.go(1);

Copier après la connexion

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;

Copier après la connexion

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

La nouvelle

API de HTML5 étend window.history, rendant le point d'enregistrement de l'historique plus ouvert. 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'enregistrement historique actuel

de la même manière que si vous poussiez le

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");

Copier après la connexion

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

window.history.replaceState est similaire à window.history.pushState, la différence est que replaceState ne le sera pas. dans la fenêtre L'effet de l'ajout d'un nouveau point d'enregistrement historique dans .history 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 historiques

La surveillance des points d'enregistrement historiques peut être intuitivement considérée comme la surveillance des changements d'URL, mais l'URL

sera ignorée. La partie surveille la partie hachage de l'URL. HTML5 a une nouvelle API appelée onhashchange. Mon blog parle également de cette méthode et de solutions compatibles avec plusieurs navigateurs. 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}
}

Copier après la connexion

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.

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!