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() 等のメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。

js
addEventListener("pageswap", (event) => {});
onpageswap = (event) => {};

イベント型

PageSwapEvent です。Event を継承しています。

Event PageSwapEvent

インスタンスプロパティ

PageSwapEvent.activation 読取専用

同一オリジン内の移動に関するナビゲーション種別と、移動元および移動先の文書履歴項目を含む NavigationActivation オブジェクトを返します。ナビゲーションのリダイレクトチェーンのどこかにオリジンをまたぐ URL がある場合は、null が返されます。

PageSwapEvent.viewTransition 読取専用

イベント発生時にアクティブなものがあれば、文書間のナビゲーションにおけるアクティブなビュー遷移を表す ViewTransition オブジェクトを返します。そうでない場合は null を返します。

例

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
# event-pageswap

ブラウザーの互換性

BCD tables only load in the browser

関連情報