Window：pageswap 事件
当你在文档之间导航且上一个文档即将卸载时，会触发 pageswap 事件。
这对于跨文档（MPA）视图过渡很有用，可以从导航的出站页面操作活动的过渡。例如，你可能希望跳过过渡，或者通过 JavaScript 自定义出站过渡动画。
它还提供了对导航类型以及当前和目标文档历史条目的访问。
语法
在诸如 addEventListener() 之类的方法中使用事件名称，或设置事件处理程序属性。
js
addEventListener("pageswap", (event) => { })
onpageswap = (event) => { }
事件类型
一个 PageSwapEvent。继承自 Event。
事件属性
PageSwapEvent.activation只读-
返回一个
NavigationActivation对象，其中包含同源导航的导航类型以及当前和目标文档历史条目。如果导航在重定向链中的任何位置包含跨域 URL，则返回null。 PageSwapEvent.viewTransition只读-
如果事件触发时有活动的入站跨文档视图过渡，则返回表示该过渡的
ViewTransition对象。如果不是这种情况，则返回null。
示例
js
window.addEventListener("pageswap", async (e) => {
// Only run this if an active view transition exists
if (e.viewTransition) {
const currentUrl = e.activation.from?.url
? new URL(e.activation.from.url)
: null;
const targetUrl = new URL(e.activation.entry.url);
// Going from profile page to homepage
// ~> The big img and title are the ones!
if (isProfilePage(currentUrl) && isHomePage(targetUrl)) {
// Set view-transition-name values on the elements to animate
document.querySelector(`#detail main h1`).style.viewTransitionName =
"name";
document.querySelector(`#detail main img`).style.viewTransitionName =
"avatar";
// Remove view-transition-names after snapshots have been taken
// Stops naming conflicts resulting from the page state persisting in BFCache
await e.viewTransition.finished;
document.querySelector(`#detail main h1`).style.viewTransitionName =
"none";
document.querySelector(`#detail main img`).style.viewTransitionName =
"none";
}
// Going to profile page
// ~> The clicked items are the ones!
if (isProfilePage(targetUrl)) {
const profile = extractProfileNameFromUrl(targetUrl);
// Set view-transition-name values on the elements to animate
document.querySelector(`#${profile} span`).style.viewTransitionName =
"name";
document.querySelector(`#${profile} img`).style.viewTransitionName =
"avatar";
// Remove view-transition-names after snapshots have been taken
// Stops naming conflicts resulting from the page state persisting in BFCache
await e.viewTransition.finished;
document.querySelector(`#${profile} span`).style.viewTransitionName =
"none";
document.querySelector(`#${profile} img`).style.viewTransitionName =
"none";
}
}
});
注意：请参阅Chrome DevRel 团队成员列表以获取此代码所引用的实时演示。
规范
| 规范 |
|---|
| HTML # 事件 - pageswap |
浏览器兼容性
加载中…