Introduction à l'utilisation de JavaScript pour modifier l'adresse URL

[Introduction] Il existe une fonction très intéressante dans les navigateurs actuels. Vous pouvez modifier l'URL du navigateur sans actualiser la page ; pendant le processus de navigation, vous pouvez stocker l'historique de navigation lorsque vous êtes dans le navigateur lorsque vous cliquez sur le retour. bouton, vous pouvez revenir à l'historique de navigation et obtenir les informations de retour. Cela ne semble pas différent

Il existe une fonctionnalité très intéressante dans les navigateurs modernes, vous pouvez parcourir la page sans actualiser la page. Modifiez l'URL du navigateur lors de la navigation ; pendant le processus de navigation, vous pouvez stocker l'historique de navigation. Lorsque vous cliquez sur le bouton Précédent du navigateur, vous pouvez obtenir les informations de retour dans l'historique de navigation. Cela ne semble pas compliqué, allons-y. écrire du code. Voyons comment cela fonctionne.

var stateObject = {};
var title = "Wow Title";
var newUrl = "/my/awesome/url";
history.pushState(stateObject,title,newUrl);

Objet historique pushState() Cette méthode a 3 paramètres, comme vous pouvez le voir dans l'exemple ci-dessus. Le premier paramètre est un objet Json, qui stocke toutes les informations historiques sur l'URL actuelle. Le deuxième paramètre, le titre, équivaut à transmettre le titre d'un document, et le troisième paramètre est utilisé pour transmettre la nouvelle URL. que la barre d'adresse du navigateur change mais que la page actuelle ne s'actualise pas.

Regardons un exemple dans lequel nous stockerons des données arbitraires dans chaque URL individuelle.

for(i=0;i<5;i++){
  var stateObject = {id: i};
  var title = "Wow Title "+i;
  var newUrl = "/my/awesome/url/"+i;
  history.pushState(stateObject,title,newUrl);
}

Exécutez-le maintenant et cliquez sur le bouton Précédent de votre navigateur pour voir comment l'URL change. Pour chaque changement d'URL, il stocke l'état historique "id" et la valeur correspondante. Mais comment pouvons-nous retrouver l’état historique et faire quelque chose sur cette base ? Nous devons ajouter un écouteur d'événement à "popstate", qui sera déclenché à chaque fois que l'état de l'objet historique change.

for(i=0;i<5;i++){
  var stateObject = {id: i};
  var title = "Wow Title "+i;
  var newUrl = "/my/awesome/url/"+i;
  history.pushState(stateObject,title,newUrl);
  alert(i);
}
 
window.addEventListener(&#39;popstate&#39;, function(event) {
  readState(event.state);
});
 
function readState(data){
  alert(data.id);
}

Vous verrez maintenant que chaque fois que vous cliquez sur le bouton de retour, un événement "popstate" sera déclenché. Notre écouteur d'événements récupère ensuite l'URL à laquelle l'objet d'état d'historique est associé et demande la valeur "id".

C'est très simple et amusant, n'est-ce 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!