导航事件

有限可用性

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

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

NavigateEvent 是 导航 API 的接口，是 navigate 事件的事件对象，当 任何类型的导航 被发起时（这包括 历史记录 API 功能的使用，例如 History.go()）。NavigateEvent 提供了访问该导航信息的途径，并允许开发者拦截和控制导航处理。

Event NavigateEvent

构造函数

创建一个新的 NavigateEvent 对象实例。

实例属性

继承其父级 Event 的属性。

canIntercept 只读

如果导航可以被拦截，则返回 true，否则返回 false（例如，您无法拦截跨域导航）。

destination 只读

返回一个表示要导航到的目标的 NavigationDestination 对象。

downloadRequest 只读

在下载导航的情况下（例如，具有 download 属性的 <a> 或 <area> 元素），返回请求下载的文件的名称，否则返回 null。

formData 只读

在 POST 表单提交的情况下，返回表示提交数据的 FormData 对象，否则返回 null。

hashChange 只读

如果导航是片段导航（即到同一文档中的片段标识符），则返回 true，否则返回 false。

info 只读

返回由发起导航操作（例如 Navigation.back() 或 Navigation.navigate()）传递的 info 数据值，如果没有传递 info 数据，则返回 undefined。

返回导航类型 - push、reload、replace 或 traverse。

signal 只读

返回一个 AbortSignal，如果导航被取消（例如，用户按下浏览器的“停止”按钮，或另一个导航开始从而取消正在进行的导航），它将被中止。

userInitiated 只读

如果导航是由用户发起的（例如，通过点击链接、提交表单或按下浏览器的“后退”/“前进”按钮），则返回 true，否则返回 false。

实例方法

继承其父级 Event 的方法。

intercept()

拦截此导航，将其转换为到 destination URL 的同文档导航。它可以接受一个定义导航处理行为的处理程序函数，以及 focusReset 和 scroll 选项，以根据需要控制行为。

scroll()

如果您希望在导航处理完成之前发生，则可以调用此方法手动触发浏览器驱动的滚动行为，该行为是响应导航而发生的。

示例

使用 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);
      },
    });
  }
});

注意：在导航 API 可用之前，要执行类似的操作，您需要监听链接上的所有点击事件，运行 e.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 标准
# the-navigateevent-interface

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅