Navigation: reload() Methode

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.

Die reload() Methode des Navigation-Interfaces lädt die aktuelle URL neu und aktualisiert dabei gegebenenfalls bereitgestellten Zustand in der Liste der Historieneinträge.

Syntax

js
navigate(options)

Parameter

options Optional

Ein Optionsobjekt, das die folgenden Eigenschaften enthält:

state Optional

Vom Entwickler definierte Informationen, die in dem zugehörigen NavigationHistoryEntry gespeichert werden sollten, sobald die Navigation abgeschlossen ist. Diese Informationen können über getState() abgerufen werden. Dies kann jeder Datentyp sein. Sie möchten beispielsweise die Anzahl der Seitenbesuche für Analysezwecke speichern oder Details zum UI-Zustand speichern, sodass die Ansicht genau so angezeigt werden kann, wie der Benutzer sie zuletzt verlassen hat. Alle im state gespeicherten Daten müssen strukturiert kopierbar sein.

info Optional

Vom Entwickler definierte Informationen, die an das navigate Ereignis übergeben werden sollen und in NavigateEvent.info verfügbar sind. Dies kann jeder Datentyp sein. Sie könnten beispielsweise den neu geladenen Inhalt mit einer anderen Animation anzeigen, je nachdem, wie die Navigation erfolgte (nach links wischen, nach rechts wischen oder nach Hause gehen). Ein String, der angibt, welche Animation verwendet werden soll, könnte als info übergeben werden.

Rückgabewert

Ein Objekt mit folgenden Eigenschaften:

committed

Ein Promise, das erfüllt wird, wenn sich die sichtbare URL geändert hat und ein neues NavigationHistoryEntry erstellt wurde.

finished

Ein Promise, das erfüllt wird, wenn alle durch den intercept()-Handler zurückgegebenen Promises erfüllt sind. Dies entspricht der Erfüllung des NavigationTransition.finished Promises, wenn das navigatesuccess Ereignis ausgelöst wird.

Eines dieser Promises schlägt fehl, wenn die Navigation aus irgendeinem Grund fehlschlägt.

Ausnahmen

DataCloneError DOMException

Ausgelöst, wenn der state Parameter Werte enthält, die nicht strukturiert kopierbar sind.

Beispiele

Verwendung von info und state

js
async function handleReload() {
  await navigation.reload({
    info: { animation: "fade-in" },
    state: { infoPaneOpen: true },
  }).finished;

  // Update application state
  // ...
}

Seite neu laden und ein neues State-Element hinzufügen:

js
async function handleReload() {
  await navigation.reload({
    state: { ...navigation.currentEntry.getState(), newState: 3 },
  }).finished;

  // Update application state
  // ...
}

Spezifikationen

Specification
HTML Standard
# dom-navigation-reload-dev

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch