导航：navigate 事件

有限可用性

此功能不是基线功能，因为它在一些使用最广泛的浏览器中不起作用。

实验性： 这是一个 实验性技术
在生产环境中使用此功能之前，请仔细查看 浏览器兼容性表。

navigate 事件是 Navigation 接口的事件，当 任何类型的导航 启动时触发，允许您根据需要拦截导航。

语法

在像 addEventListener() 这样的方法中使用事件名称，或者设置事件处理程序属性。

js
addEventListener("navigate", (event) => {});

onnavigate = (event) => {};

事件类型

一个 NavigateEvent。继承自 Event。

Event NavigateEvent

示例

使用 intercept() 处理导航

js
navigation.addEventListener("navigate", (event) => {
  // Exit early if this navigation shouldn't be intercepted,
  // e.g. if the navigation is cross-origin, or a download request
  if (shouldNotIntercept(event)) {
    return;
  }

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

  if (url.pathname.startsWith("/articles/")) {
    event.intercept({
      async handler() {
        // The URL has already changed, so show a placeholder while
        // fetching the new content, such as a spinner or loading page
        renderArticlePagePlaceholder();

        // Fetch the new content and display when ready
        const articleContent = await getArticleContent(url.pathname);
        renderArticlePage(articleContent);
      },
    });
  }
});

注意：在 Navigation API 可用之前，要执行类似的操作，您需要监听链接上的所有点击事件，运行 event.preventDefault()，执行适当的 History.pushState() 调用，然后根据新的 URL 设置页面视图。这并不能处理所有导航，而只处理用户发起的链接点击。

使用 scroll() 处理滚动

在本拦截导航的示例中，handler() 函数首先获取并渲染一些文章内容，然后获取并渲染一些次要内容。在主文章内容可用后立即将页面滚动到主文章内容，这样用户就可以与之交互，而不是等待次要内容也渲染完毕。为了实现这一点，我们在两次获取之间添加了一个 scroll() 调用。

js
navigation.addEventListener("navigate", (event) => {
  if (shouldNotIntercept(navigateEvent)) {
    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);
      },
    });
  }
});

规范

规范
HTML 标准
# event-navigate

浏览器兼容性

BCD 表格只在启用 JavaScript 的浏览器中加载。

另请参阅