Einführung in die Verwendung von JavaScript zum Ändern der URL-Adresse

[Einführung] In aktuellen Browsern gibt es eine sehr interessante Funktion: Sie können die Browser-URL ändern, ohne die Seite während des Browservorgangs zu aktualisieren Mit der Schaltfläche können Sie zum Browserverlauf zurückkehren und die Rücklaufinformationen abrufen.

In modernen Browsern gibt es eine sehr interessante Funktion. Sie können die Seite durchsuchen, ohne sie zu aktualisieren. Ändern Sie die Browser-URL beim Surfen. Wenn Sie im Browser auf die Schaltfläche „Zurück“ klicken, können Sie die zurückliegenden Informationen abrufen schreibe etwas Code. Mal sehen, wie es funktioniert.

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

History-Objekt pushState() Diese Methode hat 3 Parameter, wie Sie im obigen Beispiel sehen können. Der erste Parameter ist ein Json-Objekt, das alle historischen Informationen über die aktuelle URL speichert. Der zweite Parameter, title, entspricht der Übergabe des Titels eines Dokuments, und der dritte Parameter wird zur Übergabe der neuen URL verwendet dass sich die Adressleiste des Browsers ändert, die aktuelle Seite jedoch nicht aktualisiert wird.

Sehen wir uns ein Beispiel an, in dem wir in jeder einzelnen URL einige beliebige Daten speichern.

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

Führen Sie es jetzt aus und klicken Sie auf die Zurück-Schaltfläche Ihres Browsers, um zu sehen, wie sich die URL ändert. Bei jeder Änderung der URL werden der historische Status „id“ und der entsprechende Wert gespeichert. Aber wie können wir den historischen Zustand wiedererlangen und darauf aufbauend etwas unternehmen? Wir müssen „popstate“ einen Ereignis-Listener hinzufügen, der jedes Mal ausgelöst wird, wenn sich der Status des Verlaufsobjekts ändert.

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

Jetzt werden Sie sehen, dass jedes Mal, wenn Sie auf die Schaltfläche „Zurück“ klicken, ein „Popstate“-Ereignis ausgelöst wird. Unser Ereignis-Listener ruft dann die URL ab, mit der das Verlaufsstatusobjekt verknüpft ist, und fordert zur Eingabe des Werts von „id“ auf.

Es ist sehr einfach und macht Spaß, nicht wahr?

Das obige ist der detaillierte Inhalt vonEinführung in die Verwendung von JavaScript zum Ändern der URL-Adresse. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!