NavigateEvent

Constructor

NavigateEvent()

Tạo một thực thể NavigateEvent mới.

Thuộc tính thể hiện

Kế thừa các thuộc tính từ giao diện cha, Event.

canIntercept Read only

Trả về true nếu điều hướng có thể bị chặn, ngược lại trả về false (ví dụ: bạn không thể chặn một điều hướng xuyên nguồn gốc).

destination Read only

Trả về một đối tượng NavigationDestination đại diện cho đích đến mà điều hướng đang hướng tới.

downloadRequest Read only

Trả về tên tệp được yêu cầu tải xuống, trong trường hợp là điều hướng tải xuống (ví dụ: một phần tử <a> hoặc <area> có thuộc tính download), hoặc null trong các trường hợp khác.

formData Read only

Trả về đối tượng FormData đại diện cho dữ liệu đã gửi trong trường hợp gửi biểu mẫu POST, hoặc null trong các trường hợp khác.

hashChange Read only

Trả về true nếu điều hướng là một điều hướng fragment, tức là tới một định danh fragment trong cùng tài liệu, ngược lại trả về false.

hasUAVisualTransition Read only

Trả về true nếu tác nhân người dùng đã thực hiện một chuyển tiếp trực quan cho điều hướng này trước khi phát sự kiện, ngược lại trả về false.

info Read only

Trả về giá trị dữ liệu info được truyền bởi thao tác điều hướng khởi tạo (ví dụ: Navigation.back() hoặc Navigation.navigate()), hoặc undefined nếu không có dữ liệu info nào được truyền.

navigationType Read only

Trả về kiểu điều hướng: push, reload, replace, hoặc traverse.

signal Read only

Trả về một AbortSignal, sẽ bị hủy nếu điều hướng bị hủy (ví dụ: khi người dùng nhấn nút "Stop" của trình duyệt, hoặc khi một điều hướng khác bắt đầu và hủy điều hướng hiện tại).

sourceElement Read only

Khi điều hướng được khởi tạo bởi một phần tử (ví dụ khi nhấp vào một liên kết), trả về đối tượng Element đại diện cho phần tử khởi tạo.

userInitiated Read only

Trả về true nếu điều hướng được khởi tạo bởi người dùng (ví dụ: nhấp vào liên kết, gửi biểu mẫu, hoặc nhấn các nút "Back"/"Forward" của trình duyệt), ngược lại trả về false.

Phương thức thể hiện

Kế thừa các phương thức từ giao diện cha, Event.

intercept()

Chặn điều hướng này, biến nó thành điều hướng cùng tài liệu đến URL destination. Nó có thể nhận các hàm xử lý định nghĩa hành vi xử lý điều hướng, cùng với các tùy chọn focusReset và scroll để bật hoặc tắt hành vi mặc định của trình duyệt về tiêu điểm và cuộn theo ý muốn.

scroll()

Có thể được gọi để kích hoạt thủ công hành vi cuộn do trình duyệt điều khiển xảy ra để phản hồi điều hướng, nếu bạn muốn việc đó diễn ra trước khi quá trình xử lý điều hướng hoàn tất.

Ví dụ

Xử lý điều hướng bằng intercept()

navigation.addEventListener("navigate", (event) => {
  // Thoát sớm nếu điều hướng này không nên bị chặn,
  // ví dụ: nếu điều hướng là xuyên nguồn gốc hoặc là yêu cầu tải xuống
  if (shouldNotIntercept(event)) return;

  const url = new URL(event.destination.url);

  if (url.pathname.startsWith("/articles/")) {
    event.intercept({
      async handler() {
        // URL đã thay đổi, nên hiển thị placeholder trong khi
        // tìm nạp nội dung mới, chẳng hạn như spinner hoặc trang đang tải
        renderArticlePagePlaceholder();

        // Tìm nạp nội dung mới và hiển thị khi sẵn sàng
        const articleContent = await getArticleContent(url.pathname);
        renderArticlePage(articleContent);
      },
    });
  }
});

Xử lý cuộn bằng scroll()

Trong ví dụ này về việc chặn điều hướng, hàm handler() bắt đầu bằng cách tìm nạp và hiển thị một số nội dung bài viết, rồi sau đó mới tìm nạp và hiển thị thêm nội dung phụ. Sẽ hợp lý hơn nếu cuộn trang đến phần nội dung chính ngay khi nó có sẵn để người dùng có thể tương tác, thay vì đợi đến khi nội dung phụ cũng được hiển thị xong. Để làm vậy, chúng ta thêm lời gọi scroll() ở giữa.

navigation.addEventListener("navigate", (event) => {
  if (shouldNotIntercept(event)) return;
  const url = new URL(event.destination.url);

  if (url.pathname.startsWith("/articles/")) {
    event.intercept({
      async handler() {
        const articleContent = await getArticleContent(url.pathname);
        renderArticlePage(articleContent);

        event.scroll();

        const secondaryContent = await getSecondaryContent(url.pathname);
        addSecondaryContent(secondaryContent);
      },
    });
  }
});

Thông số kỹ thuật

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

Xem thêm

• Modern client-side routing: the Navigation API
• Navigation API explainer
• Navigation API live demo (xem mã nguồn demo)