So verwenden Sie die History -API in JavaScript

Verwenden Sie die History-API, um aktualisierte URL-Updates und Browser-Navigationsunterstützung in einseitigen Anwendungen zu ermöglichen. 1. Zugangsgeschichte über Window.History, History. 2. verwenden Sie Pushstate (Status, Titel, URL), um dem Verlaufsstapel neue Einträge hinzuzufügen, die URL zu ändern und die Statusdaten zu verknüpfen, ohne die Seite zu aktualisieren. 3.. Verwenden Sie den Austausch (Status, Titel, URL), um die aktuellen historischen Einträge zu ersetzen, um wiederholte Vorgänge zu vermeiden, wenn der Benutzer zurückbackt. V. 5. In den tatsächlichen Anwendungen müssen manuelle UI-Updates, die relative Pfadnutzung, die serverseitige Routing-Konfiguration (z. B. alle SPA-Pfade auf index.html) und Browserkompatibilitätsprüfungen kombinieren, um eine reibungslose Navigation und Wiederherstellung zu gewährleisten. Die ordnungsgemäße Verwendung der Historie -API ermöglicht eine native nahtlose Navigationserfahrung.

Mit der History -API in JavaScript können Sie mit dem Sitzungsverlauf des Browsers interagieren - die Seiten, die in der aktuellen Registerkarte oder im aktuellen Fenster besucht werden. Es ist besonders nützlich, um einseitige Anwendungen (SPAs) zu erstellen, bei denen Sie die URL ändern und die Browser-Navigation (Rück-/Vorwärts-Schaltflächen) unterstützen möchten, ohne die Seite neu zu laden.

Hier erfahren Sie, wie Sie die History -API effektiv verwenden:

1. Verständnis window.history . Historie

Das history ist Teil des window und bietet Methoden und Eigenschaften, um den Sitzungsverlauf zu navigieren und zu manipulieren.

Gemeinsame Eigenschaften:

• history.length - Anzahl der Seiten in der Sitzungshistorie.
• history.state - Gibt eine Kopie des staatlichen Objekts des aktuellen Verlaufseintrags zurück.

2. Verwenden Sie pushState() um einen neuen Eintrag hinzuzufügen

pushState() fügt einen neuen Eintrag in den Stapel des Browser -Verlaufs hinzu, ohne die Seite neu zu laden.

Syntax:

 history.pusstate (Staat, Titel, URL);

• state : Ein Objekt, das Daten enthält, die mit dem neuen Verlaufseintrag zugeordnet sind (z. B. Seitenzustand).
• title : (derzeit von den meisten Browsern ignoriert) für den Seitentitel bestimmt.
• url : Die neue URL zum Anzeigen (optional, muss gleichorientiert sein).

Beispiel:

 // URL in /Seite 2 ändern und einen Zustand speichern
history.pusstate ({Seite: 2}, "", "/Seite 2");

// Sie können jetzt über historische State auf den Staat zugreifen
console.log (history.state); // {Seite: 2}

Dadurch wird die URL auf /page2 aktualisiert, lädt jedoch nicht die Seite - Ihr Spa übernimmt die Inhaltsänderung.

3.. Verwenden Sie replaceState() um den aktuellen Eintrag zu ändern

replaceState() funktioniert wie pushState() , ersetzt jedoch den aktuellen Verlaufseintrag, anstatt eine neue hinzuzufügen.

Anwendungsfall: Aktualisieren der URL nach einer Aktion, ohne einen zusätzlichen Rückschritt zu erstellen.

 History.Replacestate ({Seite: 3, Daten: "Aktualisiert"}, "", "/page3");

Jetzt wird der aktuelle Verlaufseintrag in /page3 geändert. Wenn Sie auf "zurück" klicken, überspringen Sie diesen modifizierten Status und gehen zum vorherigen.

4. Hören Sie sich popstate -Events für die Navigation an

Wenn der Benutzer auf die Schaltfläche zurück oder voran klickt, feuert das popstate -Ereignis. Sie können es anhören, um Ihren Seiteninhalt entsprechend zu aktualisieren.

 window.addeventListener ("popstate", (event) => {
  console.log ("Ort:", document.location);
  console.log ("state:", event.state);

  // Inhalte basierend auf event.state oder aktueller URL neu render
  loadContentBasedonurl ();
});

HINWEIS: popstate löst nur beim Navigieren zwischen Verlaufseinträgen mit einem Zustandsobjekt (z. B. denjenigen, die von pushState oder replaceState erstellt wurden) aus. Nach replaceState feuern es nicht, es sei denn, Sie navigieren weg und zurück.

5. Praktisches Beispiel: Einfache Spa -Navigation

 // Seitennavigation simulieren
Funktionsnavigation (URL, PAGEDATA) {
  const title = `$ {url} - My App`;
  history.pusstate (pagedata, title, url);
  Renderpage (pagedata);
}

// Zurück/vorwärts
window.addeventListener ("popstate", () => {
  Renderpage (Geschichte.State);
});

// Erstes Rendern
Funktion Renderpage (Zustand) {
  if (! Zustand) {
    document.body.innerhtml = "<h1> home </h1>";
  } else if (state.page === 2) {
    document.body.innerhtml = "<h1> Seite 2 </h1>";
  } anders {
    document.body.innerhtml = "<h1> Unbekannte Seite </h1>";
  }
}

// Beispielnavigation
Navigateto ("/Seite 2", {Seite: 2});

6. Best Practices und Gotchas

• Immer die Benutzeroberfläche manuell aktualisieren : pushState und replaceState nur die URL und den Verlauf - Sie müssen den Seiteninhalt selbst aktualisieren.
• Verwenden Sie relative URLs : Halten Sie URLs einfach und relativ zum aktuellen Ursprung.
• Vollständige Seite laden : Wenn Benutzer eine direkte URL direkt neu laden oder besuchen, muss Ihr Server die richtige HTML (z. B. alle SPA -Pfade nach index.html ) bedienen.
• Überprüfen Sie den Browserunterstützung : Die meisten modernen Browser unterstützen die Historie -API, stellen Sie jedoch sicher, ob Sie ältere Umgebungen unterstützen.

Zusammenfassung

• Verwenden Sie pushState() um einen neuen Verlaufseintrag hinzuzufügen.
• Verwenden Sie den aktuellen Eintrag replaceState() .
• Hören Sie sich popstate an, um auf die Rück-/Vorwärtsnavigation zu reagieren.
• Verwalten Sie den UI -Zustand Ihrer App separat und synchronisieren Sie ihn mit der URL.

Mit der History -API können Sie reibungslose, dynamische Navigationserlebnisse erstellen, die sich nativ anfühlen - alles ohne vollständige Seite Nachladen.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie die History -API in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!