Navigation：navigate 事件

Limited availability

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

实验性: 这是一项实验性技术
在将其用于生产之前，请仔细检查浏览器兼容性表格。

Navigation 接口的 navigate 事件在发起任何类型的导航时触发，让你可以根据需要进行拦截。

语法

在诸如 addEventListener() 之类的方法中使用事件名称，或设置事件处理器属性。

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

onnavigate = (event) => {};

事件类型

NavigateEvent。继承自 Event。

Event NavigateEvent

示例

使用 intercept() 处理导航

js
navigation.addEventListener("navigate", (event) => {
  // 如果此导航不应被拦截，则提前退出，例如，如果导航是跨源的，或者是下载请求
  if (shouldNotIntercept(event)) {
    return;
  }

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

  if (url.pathname.startsWith("/articles/")) {
    event.intercept({
      async handler() {
        // URL 已更改，因此在获取新内容时显示占位符，例如旋转图标或加载页面
        renderArticlePagePlaceholder();

        // 获取新内容并在准备就绪时显示
        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);
      },
    });
  }
});

规范

Specification
HTML
# event-navigate

浏览器兼容性

BCD tables only load in the browser

参见