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 jeden bereitgestellten Zustand in der Liste der Verlaufseinträge.

Syntax

reload()
reload(options)

Parameter

options Optional

Ein Optionsobjekt, das die folgenden Eigenschaften enthält:

state Optional: Entwicklerdefinierte Informationen, die im zugehörigen NavigationHistoryEntry gespeichert werden, sobald die Navigation abgeschlossen ist und über getState() abgerufen werden können. Dies kann jeder Datentyp sein. Sie könnten beispielsweise die Besuche einer Seite zu Analysezwecken speichern oder Details zum UI-Zustand speichern, damit die Ansicht genau so angezeigt werden kann, wie der Benutzer sie zuletzt verlassen hat. Alle in state gespeicherten Daten müssen strukturiert klonbar sein.
info Optional: Entwicklerdefinierte Informationen, die dem navigate-Event übergeben werden, verfügbar in NavigateEvent.info. Dies kann jeder Datentyp sein. Sie könnten beispielsweise neu navigierte Inhalte mit einer anderen Animation abhängig davon anzeigen wollen, wie navigiert wurde (nach links wischen, nach rechts wischen oder zurück zur Startseite). Ein String, der angibt, welche Animation verwendet werden soll, könnte als info übergeben werden.

Rückgabewert

Ein Objekt mit den folgenden Eigenschaften:

committed: Ein Promise, das erfüllt wird, wenn die sichtbare URL geändert wurde und ein neues NavigationHistoryEntry erstellt wurde.
finished: Ein Promise, das erfüllt wird, wenn alle von dem intercept() Handler zurückgegebenen Versprechen erfüllt sind. Dies entspricht dem Erfüllen des NavigationTransition.finished-Versprechens, wenn das navigatesuccess-Event ausgelöst wird.

Eines dieser Versprechen wird zurückgewiesen, wenn die Navigation aus irgendeinem Grund fehlgeschlagen ist.

Ausnahmen

DataCloneError DOMException: Wird ausgelöst, wenn der state-Parameter Werte enthielt, die nicht strukturiert klonbar sind.

Beispiele

Verwendung von info und state

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:

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

  // Update application state
  // …
}

Spezifikationen

Specification
HTML # dom-navigation-reload-dev