Window: pageswap イベント
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。
pageswap イベントは、文書間の移動時、つまり前回表示していた文書がアンロードされようとする際に発行されます。
これは、文書間 (MPA) のビュー遷移において、移動の流出ページからアクティブな遷移を操作する場合に便利です。例えば、遷移をスキップしたり、JavaScript で流出遷移のアニメーションをカスタマイズしたい場合などです。
また、ナビゲーションの種類や、移動元及び移動先文書内の履歴項目にアクセスすることもできます。
構文
このイベント名を addEventListener() 等のメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。
addEventListener("pageswap", (event) => {});
onpageswap = (event) => {};
イベント型
PageSwapEvent です。Event を継承しています。
インスタンスプロパティ
PageSwapEvent.activation読取専用-
同一オリジン内の移動に関するナビゲーション種別と、移動元および移動先の文書履歴項目を含む
NavigationActivationオブジェクトを返します。ナビゲーションのリダイレクトチェーンのどこかにオリジンをまたぐ URL がある場合は、nullが返されます。 PageSwapEvent.viewTransition読取専用-
イベント発生時にアクティブなものがあれば、文書間のナビゲーションにおけるアクティブなビュー遷移を表す
ViewTransitionオブジェクトを返します。そうでない場合はnullを返します。
例
window.addEventListener("pageswap", async (e) => {
// アクティブなビュー遷移が存在する場合のみ実行
if (e.viewTransition) {
const currentUrl = e.activation.from?.url
? new URL(e.activation.from.url)
: null;
const targetUrl = new URL(e.activation.entry.url);
// プロフィールページからホームページへ移動
// ~> それぞれの大きな画像とタイトル
if (isProfilePage(currentUrl) && isHomePage(targetUrl)) {
// view-transition-name の値をアニメーションする要素に設定
document.querySelector(`#detail main h1`).style.viewTransitionName =
"name";
document.querySelector(`#detail main img`).style.viewTransitionName =
"avatar";
// スナップショットが採られた後、view-transition-names を除去
// BFCacheにページの状態が保持されたことによる名前の競合を回避
await e.viewTransition.finished;
document.querySelector(`#detail main h1`).style.viewTransitionName =
"none";
document.querySelector(`#detail main img`).style.viewTransitionName =
"none";
}
// プロフィールページへ移動
// ~> クリックしたアイテム
if (isProfilePage(targetUrl)) {
const profile = extractProfileNameFromUrl(targetUrl);
// view-transition-name の値をアニメーションする要素に設定
document.querySelector(`#${profile} span`).style.viewTransitionName =
"name";
document.querySelector(`#${profile} img`).style.viewTransitionName =
"avatar";
// スナップショットが採られた後、view-transition-names を除去
// BFCacheにページの状態が保持されたことによる名前の競合を回避
await e.viewTransition.finished;
document.querySelector(`#${profile} span`).style.viewTransitionName =
"none";
document.querySelector(`#${profile} img`).style.viewTransitionName =
"none";
}
}
});
メモ: このコードの採取元のライブデモは、List of Chrome DevRel team members を参照してください。
仕様書
| Specification |
|---|
| HTML # event-pageswap |
ブラウザーの互換性
Loading…
関連情報
- ビュー遷移 API の使用
pagerevealイベント