PageSwapEvent

Limited availability

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

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
# the-pageswapevent-interface

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
PageSwapEvent
PageSwapEvent() constructor
activation
viewTransition

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
See implementation notes.

関連情報