PageSwapEvent
Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。
PageSwapEvent
イベントオブジェクトは、 pageswap
イベントのハンドラー関数内で利用できます。
pageswap
イベントは、前の文書がアンロードされようとしているときに、文書間を移動するときに発行されます。文書間の移動中に、PageSwapEvent
イベントオブジェクトを使用すると、移動元の文書から関連するビュー遷移(関連する ViewTransition
オブジェクトにアクセス)を操作することができます。また、ナビゲーションの種類や現在の文書と出力先文書に関する情報にもアクセスできます。
コンストラクター
PageSwapEvent()
Experimental-
新しい
PageSwapEvent
オブジェクトインスタンスを作成します。
インスタンスプロパティ
activation
読取専用 Experimental-
NavigationActivation
オブジェクトを保持しており、これは、同一オリジン内の移動に関するナビゲーション種別と、移動元および移動先の文書履歴項目が含まれています。ナビゲーションのリダイレクトチェーンのどこかにオリジンをまたぐ URL がある場合は、null
が返されます。 viewTransition
読取専用 Experimental-
文書間のナビゲーションにおけるアクティブなビュー遷移を表す
ViewTransition
オブジェクトを保持しています。
例
js
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 Standard # the-pageswapevent-interface |
ブラウザーの互換性
BCD tables only load in the browser