NavigationActivation

Limited availability

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

Das NavigationActivation-Interface der Navigation API repräsentiert eine kürzlich erfolgte Dokument-übergreifende Navigation. Es enthält den Navigationstyp sowie ausgehende und eingehende Dokumenthistorieneinträge.

Auf dieses Objekt wird über die Eigenschaften PageSwapEvent.activation und Navigation.activation zugegriffen. Beachten Sie, dass das NavigationActivation in jedem Fall eine unterschiedliche Navigation darstellt:

Navigation.activation repräsentiert Informationen über die Navigation zur aktuellen Seite.
PageSwapEvent.activation repräsentiert Informationen über die Navigation zur nächsten Seite.

Instanzeigenschaften

entry Schreibgeschützt: Enthält ein NavigationHistoryEntry-Objekt, das den Historieneintrag für das eingehende ("zu") Dokument in der Navigation repräsentiert. Dies entspricht der Navigation.currentEntry-Eigenschaft in dem Moment, in dem das eingehende Dokument aktiviert wurde.
from Schreibgeschützt: Enthält ein NavigationHistoryEntry-Objekt, das den Historieneintrag für das ausgehende ("von") Dokument in der Navigation repräsentiert.
navigationType Schreibgeschützt: Enthält einen String, der den Typ der Navigation angibt.

Beispiele

window.addEventListener("pagereveal", async (e) => {
  // If the "from" history entry does not exist, return
  if (!navigation.activation.from) return;

  // Only run this if an active view transition exists
  if (e.viewTransition) {
    const fromUrl = new URL(navigation.activation.from.url);
    const currentUrl = new URL(navigation.activation.entry.url);

    // Went from profile page to homepage
    // ~> Set VT names on the relevant list item
    if (isProfilePage(fromUrl) && isHomePage(currentUrl)) {
      const profile = extractProfileNameFromUrl(fromUrl);

      // Set view-transition-name values on the elements to animate
      document.querySelector(`#${profile} span`).style.viewTransitionName =
        "name";
      document.querySelector(`#${profile} img`).style.viewTransitionName =
        "avatar";

      // Remove names after snapshots have been taken
      // so that we're ready for the next navigation
      await e.viewTransition.ready;
      document.querySelector(`#${profile} span`).style.viewTransitionName =
        "none";
      document.querySelector(`#${profile} img`).style.viewTransitionName =
        "none";
    }

    // Went to profile page
    // ~> Set VT names on the main title and image
    if (isProfilePage(currentUrl)) {
      // Set view-transition-name values on the elements to animate
      document.querySelector(`#detail main h1`).style.viewTransitionName =
        "name";
      document.querySelector(`#detail main img`).style.viewTransitionName =
        "avatar";

      // Remove names after snapshots have been taken
      // so that we're ready for the next navigation
      await e.viewTransition.ready;
      document.querySelector(`#detail main h1`).style.viewTransitionName =
        "none";
      document.querySelector(`#detail main img`).style.viewTransitionName =
        "none";
    }
  }
});

Hinweis: Sehen Sie sich Liste der Chrome DevRel-Teammitglieder für die Live-Demo an, aus der dieser Code stammt.

Spezifikationen

Specification
HTML # navigationactivation

Browser-Kompatibilität

Siehe auch

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden