1. Web
  2. Web API
  3. NavigationActivation

NavigationActivation

Baseline 2026
Newly available

Since January 2026, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Giao diện NavigationActivation của Navigation API đại diện cho một điều hướng giữa các tài liệu gần đây. Nó chứa loại điều hướng và các mục lịch sử tài liệu đến và đi.

Đối tượng này được truy cập thông qua các thuộc tính PageSwapEvent.activation và Navigation.activation. Lưu ý rằng trong mỗi trường hợp, NavigationActivation đại diện cho một điều hướng khác nhau:

  • Navigation.activation đại diện cho thông tin về điều hướng đến trang hiện tại.
  • PageSwapEvent.activation đại diện cho thông tin về điều hướng đến trang tiếp theo.

Thuộc tính phiên bản

entry Read only

Chứa một đối tượng NavigationHistoryEntry đại diện cho mục lịch sử cho tài liệu đến ("to") trong điều hướng. Tương đương với thuộc tính Navigation.currentEntry tại thời điểm tài liệu đến được kích hoạt.

from Read only

Chứa một đối tượng NavigationHistoryEntry đại diện cho mục lịch sử cho tài liệu đi ("from") trong điều hướng.

Chứa một chuỗi cho biết loại điều hướng.

Ví dụ

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

Note: Xem Danh sách thành viên nhóm Chrome DevRel cho demo trực tiếp mà code này được lấy từ đó.

Thông số kỹ thuật

Specification
HTML
# navigationactivation

Tương thích trình duyệt

Xem thêm

Help improve MDN

Learn how to contribute

This page was last modified on by MDN contributors.

View this page on GitHub • Report a problem with this content