Explication détaillée de l'historique des opérations pushstate et popstate de HTML5 pour modifier l'exemple de code URL actuel 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ôlent 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. En avant et en arrière dans l'histoire

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

window.history.back();

C'est comme si l'utilisateur clique sur le bouton Précédent

du navigateur .

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

 window.history.forward();

2. Déplacer Vers un point d'historique spécifié

En spécifiant une valeur relative à la position actuelle de la page, vous pouvez utiliser la méthode go() pour charger une page à partir de l'historique de la session en cours (position actuelle de la page

index La valeur est 0, la page précédente est -1 et la page suivante est 1).

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

 window.history.go(-1);

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 l'enregistrement d'historique points

La nouvelle

API de 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. Stocker le point d'enregistrement historique actuel

est stocké d'une manière similaire à la poussée de

tableau sur la pile ( Array.push()), ajoutez un point d'enregistrement d'historique dans window.history, par exemple :

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

// 当前的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");

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 apportées à l'URL et obtenir l'objet d'état stocké au point d'enregistrement historique, qui est l'objet json mentionné ci-dessus, tel que :

Il convient de noter que l'événement onpopstate

// 当前的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}
}

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!