NavigateEvent
NavigateEvent 接口是 Navigation API 的一个接口，它是 navigate 事件的事件对象。当 任何类型的导航 被发起时（这包括使用 History API 的功能，例如 History.go()），该事件就会触发。NavigateEvent 提供了访问有关该导航的信息，并允许开发者拦截和控制导航的处理。
构造函数
-
创建一个新的
NavigateEvent对象实例。
实例属性
继承其父级 Event 的属性。
canInterceptRead only Experimental-
如果导航可以被拦截，则返回
true，否则返回false（例如，您无法拦截跨域导航）。 destinationRead only Experimental-
返回一个
NavigationDestination对象，该对象表示正在导航到的目标。 downloadRequestRead only Experimental-
在下载导航的情况下（例如，带有
download属性的<a>或<area>元素），返回被请求下载的文件名，否则返回null。 formDataRead only Experimental-
在
POST表单提交的情况下，返回表示提交数据的FormData对象，否则返回null。 hashChangeRead only Experimental-
如果导航是片段导航（即导航到同一文档中的片段标识符），则返回
true，否则返回false。 hasUAVisualTransitionRead only Experimental-
如果在分发此事件之前，用户代理为此导航执行了视觉过渡，则返回
true，否则返回false。 infoRead only Experimental-
返回由发起导航操作（例如
Navigation.back()或Navigation.navigate()）传递的info数据值，如果未传递info数据，则返回undefined。 -
返回导航的类型 —
push、reload、replace或traverse。 signalRead only Experimental-
返回一个
AbortSignal，如果导航被取消（例如，用户点击了浏览器的“停止”按钮，或者开始了另一个导航并因此取消了当前导航），该信号将变为中止状态。 sourceElementRead only Experimental-
当导航是由一个元素发起的（例如点击链接时），则返回一个表示发起元素的
Element对象。 userInitiatedRead only Experimental-
如果导航是由用户发起的（例如，通过点击链接、提交表单或按下浏览器的“后退/前进”按钮），则返回
true，否则返回false。
实例方法
继承其父级 Event 的方法。
intercept()Experimental-
拦截此导航，将其转换为同文档导航到
destinationURL。它可以接受一个处理函数来定义导航处理行为，以及focusReset和scroll选项来按需控制行为。 scroll()Experimental-
如果要在导航处理完成之前触发浏览器驱动的滚动行为，可以调用此方法来手动触发它。
示例
使用 intercept() 处理导航
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 可用之前，要实现类似的功能，您需要监听链接上的所有点击事件，运行 e.preventDefault()，执行适当的 History.pushState() 调用，然后根据新 URL 设置页面视图。而且这不会处理所有导航 — 只会处理用户发起的链接点击。
使用 scroll() 处理滚动
在这个拦截导航的例子中，handler() 函数首先获取并渲染一些文章内容，然后获取并渲染一些次要内容。一旦主要文章内容可用，立即将页面滚动到该内容是有意义的，以便用户可以与之交互，而不是等到次要内容也渲染完成。为了实现这一点，我们在两者之间添加了一个 scroll() 调用。
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 |
浏览器兼容性
加载中…