Utilisation de window.history dans js (1)

Window.history enregistre l'enregistrement d'accès au site Web de l'utilisateur au cours d'une session Chaque fois que l'utilisateur visite une nouvelle URL, un nouvel enregistrement d'historique est créé.

history.go(), history.back(), history.forward()

history.back() et history.forward() représentent respectivement le Un en arrière page et une page en avant.

history.go(num) indique le nombre de pages à avancer ou à reculer. Un nombre positif pour num signifie tourner en avant, et un nombre négatif signifie tourner en arrière.

History.back() est équivalent à history.go(-1), history.forward() est équivalent à history.go(1).

Exécutez l'une de ces trois méthodes pour déclencher l'événement popstate du navigateur. Si seule la partie de hachage change, l'événement hashchange peut également être déclenché en même temps.

Modifier le chemin du site Web et créer un nouvel enregistrement d'historique

history.pushState(statedata, title, url);

L'URL du paramètre doit avoir la même origine que l'URL actuelle , sinon une erreur sera signalée. Vous ne pouvez modifier que le chemin dans l'URL, le fragment après le signe dièse (c'est-à-dire le hachage) ou la section requête après le point d'interrogation (?) dans l'URL.

Chaque fois que pushState() est exécuté, l'URL actuelle est remplacée par une nouvelle URL, c'est-à-dire que l'URL de la barre d'adresse changera, window.location.href changera également et un nouvel enregistrement d'historique sera créé en même temps. Mais l'exécution de pushState() ne déclenche jamais l'événement hashchange.

Le paramètre statedata peut être n'importe quelle donnée sérialisée enregistrée sur le disque dur de l'utilisateur. Cependant, il existe des limites de taille pour les données d'état. Par exemple, Firefox n'autorise que 640 Ko de caractères.

L'avantage d'utiliser pushState() : seule la partie hachage de l'URL est modifiée, et window.location utilise le même document.

Problèmes de compatibilité

pushState n'était pas pris en charge avant IE10. Dans les versions antérieures d'IE, cela ne pouvait être résolu qu'en modifiant window.location="#foo", mais cela déclencherait l'événement hashchange. .

Modifiez le chemin du site Web mais ne créez pas de nouvel enregistrement d'historique

Comme vous pouvez le voir dans le titre, la seule différence entre replaceState() et pushState() est qu'aucun nouvel enregistrement d'historique n'est créé, mais modifie directement l'enregistrement d'historique actuel.

history.replaceState(stateData, title, url);

Statut de l'historique

Il existe deux façons d'accéder aux informations d'état des enregistrements d'accès historiques history.state renvoie l'état de l'enregistrement en haut de. la pile d'accès historique. La valeur PopStateEvent.state n'est accessible que dans l'écouteur d'événement lorsque l'événement PopStateEvent est déclenché. La valeur par défaut de

State peut être différente selon les navigateurs. Par exemple, la valeur par défaut en dessous de IE10 est indéfinie, mais la valeur par défaut de IE10 et IE11 est null. HTML5 Il est recommandé d'utiliser nul comme valeur par défaut.

Événement

événement popstate

Appel history.back(), history.forward(), history.go( ) et d'autres méthodes déclencheront l'événement popstate. Le simple fait d'appeler pushState() ou replaceState() ne déclenchera pas l'événement popstate.

L'accès à l'attribut d'état de l'événement peut obtenir les données d'état initialement définies par pushState() ou replaceState().

【Recommandations associées】

1. Recommandation spéciale : "php Programmer Toolbox" version V0.1 Télécharger

2. Introduction détaillée aux exemples d'utilisation de history.pushState() dans h5

3.Utilisation de window.history en js ( 2. )

4. Compréhension approfondie des fonctionnalités d'historique dans h5-pushState, replaceState

5 L'impact de l'API History dans. h5 sur les applications web

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!