English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
HTML5Comment utiliser l'API d'historique des pages, les exemples en ligne, la démonstration HTML5Comment utiliser l'API d'historique des pages, la compatibilité du navigateur, la définition de la syntaxe et les valeurs des attributs, etc.
HTML5L'API d'historique des pages vous permet d'accéder à l'historique de navigation du navigateur via JavaScript. HTML5L'API d'historique des pages est très utile dans les applications Web monopage. Les applications Web monopage peuvent utiliser HTML5L'API d'historique des pages permet de rendre un état de l'application "marquable" dans une application Web monopage. Je reviendrai plus tard sur la manière d'utiliser l'API d'historique des pages pour établir un état marquable dans une application Web monopage.
L'historique de navigation est composé d'une série d'URL. Chaque fois que l'utilisateur navigue sur le même site, l'URL de la nouvelle page est placée au sommet du tas. Lorsque l'utilisateur clique sur le bouton "Retour", le pointeur dans le tas se déplace vers l'élément précédent dans le tas. Si l'utilisateur clique à nouveau sur le bouton "Avancer", le pointeur se déplace vers le sommet du tas. Si l'utilisateur clique sur "Retour", puis sur un nouveau lien, l'élément au sommet du tas est couvert par le nouveau URL.
Voici un exemple de tas d'historique des pages:
http://myapp.com/great-new-story.html http://myapp.com/news.html http://myapp.com
La dernière page visitée dans le tas d'historique des pages est http://myapp.com/great-new-story.html. Si l'utilisateur clique sur le bouton "Retour", le pointeur dans le tas d'historique se déplace vers l'arrière http://myapp.com/news.html. Si l'utilisateur clique sur le bouton "Avancer", le pointeur du tas d'historique se déplace vers l'avant http://myapp.com/great-new-story.html, mais si l'utilisateur clique sur un autre lien (sur http://myapp.com/news.html sur la page, alors l'URL du lien sera http://myapp.com/news.html couvre l'historique du tas de piles.
HTML5L'API d'historique permet aux applications Web d'accéder à ce pile d'historique.
HTML5L'API d'historique permet uniquement aux pages Web d'accéder à une partie de l'historique du navigateur qui est située dans le même domaine que la page Web elle-même. Pour des raisons de sécurité, cette restriction est nécessaire dans l'API d'historique, afin que les pages Web ne puissent pas voir quels autres sites l'utilisateur a visités.
De même, HTML5L'API d'historique ne permet pas aux pages Web de pousser des URL dans le pile d'historique si l'URL n'est pas dans le même domaine que le domaine de la page Web. Cette restriction assure que lorsque l'utilisateur commence à saisir une page Web, la page Web ne peut pas prétendre avoir redirigé l'utilisateur vers, par exemple, Paypal et espionner son nom d'utilisateur/mot de passe, etc.
Vous pouvez accéder à l'historique du navigateur via l'objet history, qui peut être utilisé en tant qu'objet global en JavaScript (c'est-à-dire window.history).
L'objet history contient les fonctionnalités suivantes-Inclut l'API d'historique :
back()
forward()
go(index)
pushState(stateObject, title, url)
replaceState(stateObject, title, url)
La fonction back() déplace l'historique du navigateur vers l'URL précédente. L'appel à back() a le même effet que de cliquer sur le bouton "Back" du navigateur.
La fonction forward() déplace l'historique du navigateur vers la page suivante de l'historique. L'appel à forward() a le même effet que de cliquer sur le bouton "Forward" du navigateur. Il n'est possible de passer en avant que si la pile d'historique pointe vers l'URL le plus récent de l'historique du navigateur.
La fonction go(index) peut déplacer l'historique en arrière ou en avant en fonction de l'index que vous passez à la fonction go(). Si vous appellez go() avec un index négatif (par exemple go(-1)) Le navigateur retournera à l'historique. Si vous passez un index positif à la fonction go(), le navigateur avancera dans l'historique du navigateur (par exemple go(1)) Indice indiquant l'étape à avancer ou à reculer dans l'historique du navigateur, par exemple1,2,-1,-2...
La fonction pushState(stateObject, title, url) envoie le nouveau URL dans le pile d'historique. Cette fonction possède trois paramètres. Le paramètre url est l'URL qui est poussée dans le pile d'historique. Le paramètre title est généralement ignoré par le navigateur. L'objet stateObject est, lorsque le nouveau URL est poussé dans le pile d'historique, l'objet qui est transmis avec l'événement. Il peut contenir n'importe quel type de données que vous souhaitez. C'est simplement un objet JavaScript.
La fonction replaceState(stateObject, title, url) fonctionne de la même manière que la fonction pushState(), mais elle remplace l'élément actuel de la pile d'historique par une nouvelle URL. L'élément actuel n'est pas nécessairement l'élément le plus important. C'est l'élément actuel pointé, qui peut être n'importe quel élément dans la pile, si les fonctions back(), forward() et go() ont déjà été appelées sur l'objet history.
Maintenant, voyons quelques exemples sur la manière d'utiliser HTML5Exemples de l'API d'historique.
Pour commencer, voyons comment utiliser les fonctions back() et forward() pour naviguer dans l'historique :
history.back(); history.forward();
N'oubliez pas que l'objet history est situé dans l'objet window, donc vous pouvez également écrire :
window.history.back(); window.history.forward();
Cependant, comme l'objet window est l'objet par défaut, vous pouvez l'ignorer. Dans le reste de ce tutoriel, je vais ignorer l'objet.
N'oubliez pas que vous ne pouvez pas entrer dans l'historique (ou l'utilisateur) avant de revenir dans l'historique.
Maintenant, voyons comment utiliser la fonction go() pour exécuter des actions similaires à celles des fonctions back() et forward(). Premièrement, voici l'étape précédente utilisée pour naviguer vers l'arrière dans l'historique :
history.go(-1;
Pour avancer de deux étapes, vous pouvez utiliser-2les paramètres sont passés à la fonction go() comme suit :
history.go(-2;
De même, pour avancer dans l'historique, vous pouvez passer un index positif à la fonction go(). Voici des exemples de deux étapes en avant et deux étapes en arrière dans l'historique :
history.go(1; history.go(2;
Bien sûr, si vous exécutez ces deux lignes en même temps, l'historique du navigateur avancera d'une manière ou d'une autre3étapes.
Pour ajouter un état à la pile d'historique, appellez la fonction pushState() de l'objet history. Voici un exemple de pushState() :
var state = {};
var title = "";
var url = "next"-page.html";
history.pushState(state, title, url);Ce exemple ajoute le nouveau URL à la pile d'historique. Cela modifiera également l'URL du champ d'adresse du navigateur, mais ne provoquera pas le chargement de l'URL par le navigateur.
La fonction replaceState() remplace l'élément history pointé par l'historique actuel dans le pile d'historique. Si l'utilisateur l'a déplacé en arrière à l'aide du bouton "retour", cela peut ne pas être l'élément le plus important. Voici un exemple de replaceState() :
var state = {};
var title = "";
var url = "another-page.html";
history.replaceState(state, title, url);Le remplacement de l'état changera également l'URL dans le champ d'adresse du navigateur, mais ne chargera pas l'URL. La page avec l'URL remplacé reste dans le navigateur.
HTML5L'API historique permet aux pages Web de surveiller les changements dans l'historique du navigateur. Les restrictions de sécurité s'appliquent également ici, donc les modifications d'historique qui causent l'URL à dépasser le domaine de la page Web ne sont pas notifiées au site Web.
Pour surveiller les changements dans l'historique du navigateur, définissez un écouteur sur l'objet window. Voici un exemple d'écouteur d'événement historique du navigateur :
window.onpopstate = function(event) {
console.log("Le historique est changé : ") + document.location.href);
}Le traitement de l'événement onpopstate sera appelé à chaque fois que le historique du navigateur change sur la même page (l'historique du navigateur, la page poussée dans le pile d'historique). La réaction à l'événement de modification de l'historique peut être extraire des paramètres à partir de l'URL et charger le contenu correspondant sur la page (par exemple, via AJAX).
Attention : Seul un changement entraînant un "retour" ou un "avancer" bouton, ou une fonction de navigation historique correspondante back(), forward() et go() déclenche l'invocation de l'écouteur d'événement onpopstate. L'appel des fonctions pushState() et replaceState() ne déclenche pas d'événement de modification d'historique.
Lorsque vous poussez un nouveau URL dans le pile d'historique, l'URL dans le champ d'adresse du navigateur change en fonction du nouveau URL. Cependant, le navigateur ne tente pas de charger cet URL. Il affiche simplement l'URL et le pousse dans la pile, comme si le navigateur avait visité cette page, mais la page poussée avec l'état nouveau reste dans le navigateur.
Pusher un nouveau URL dans le pile d'historique est une méthode utile pour ajouter un état spécifique dans une application single-page (SPA). Par exemple, dans un magasin en ligne en ligne, l'URL de l'application pourrait être :
http://myshop.com
Cette application pourrait peut-être afficher des produits sur la même page pour les utilisateurs, mais comment l'utilisateur enverra-t-il un lien vers un produit spécifique à ses amis ?
La solution est, lors du chargement d'un nouveau produit, l'application de page unique pousse le nouveau URL dans la pile d'historique. Cela ne cause pas le chargement du nouveau URL, mais rend effectivement le nouveau URL visible dans le champ d'adresse du navigateur. On peut l'ajouter comme favori ou le copier-coller dans des e-mails ou d'autres endroits. Voici un exemple de l'apparence de ce type d'URL qui peut être ajouté comme favori :
http://myshop.com?productId=234
ou peut-être une URL plus lisible :
http://myshop.com/products/234
ou une version légèrement plus complexe que REST (mentionnant également le type de produit) :
http://myshop.com/products/books/234
Après avoir poussé l'URL dans l'historique du navigateur, la page de la boutique Web charge le produit correspondant via AJAX et le montre à l'utilisateur.
Si l'utilisateur clique sur le bouton "Retourner", l'événement onpopstate appelle le gestionnaire d'événement. Ensuite, la page Web doit vérifier ce que l'URL nouvelle est, si l'URL retourne, alors charger la page d'accueil correspondante au produit ou à l'application avec l'URL http://myshop.com.
C'est un HTML5Exemple de code, expliquant le principe de chargement de données dans le navigateur à l'aide d'AJAX :
<a href="javascript:push('http://myshop.com/books/123');">
Book 123
</a> <br/>
<a href="javascript:push('http://myshop.com/apps/456');">
App 456
</a>
<script>
function loadUrl(url) {
console.log("loading data from url: " + url);
}
function push(url) {
history.pushState(null, null, url);
loadUrl(url);
}
window.onpopstate = function(event) {
console.log("history changed to: " + document.location.href);
loadUrl(document.location.href);
}
</script>Ce exemple contient deux liens avec un écouteur de clic JavaScript. Après avoir cliqué sur l'un des liens, l'URL correspondante est poussée dans la pile d'historique et chargée dans le navigateur.
Cet exemple contient également un écouteur d'événement onpopstate. Lorsque l'utilisateur clique sur le bouton "Retourner" ou "Avancer", cet écouteur d'événement charge l'URL affichée dans le champ d'adresse du navigateur.
Si l'utilisateur clique sur le lien et "Retourner" /Cliquez sur le bouton "Avancer", le exemple affiché précédemment sera alors en vigueur. Mais que faire si l'utilisateur envoie l'URL à un ami ou la marque comme favori et y accède plus tard ?
Si l'utilisateur essaie d'accéder à une URL étiquetée, http://myshop.com/books/123le navigateur demandera à ce serveur Web l'URL. Le serveur Web doit savoir qu'il doit renvoyer le même application en une page qu'il a reçu à partir de l'URL http://myshop.com. Vous devrez configurer le serveur Web pour effectuer cette opération.
De même, une application Web en une page doit vérifier l'URL utilisée lors du premier chargement et utiliser cette URL pour déterminer le contenu à charger et afficher. Par conséquent, si l'application en une page a chargé l'URL, alors myshop.com/books/123Cette application doit charger le produit correspondant et leafficher. Ce contrôle d'URL doit être effectué pendant l'initialisation de l'application en une page.
Au moment de la rédaction de cet article, tous les navigateurs modernes (IE, Safari, Chrome, Firefox) supportent HTML, sauf Opera Mini5API d'historique.