JSでブラウザバックを検知！popstateからNavigation APIまで

// ページの初期化処理
document.addEventListener('DOMContentLoaded', () => {
  // 1. 現在のページにダミーの履歴エントリーを追加する
  // 第1引数: stateオブジェクト, 第2引数: title（基本空文字列）, 第3引数: URL（省略可）
  history.pushState({ page: 'detected' }, '', location.href);

  // 2. popstateイベントリスナーを登録
  window.addEventListener('popstate', (event) => {
    // 戻るボタンが押された際の検知処理
    console.log('ブラウザバックを検知しました。', event.state);

    // 必要に応じて確認ダイアログ表示や状態変更を行う
    const leavePage = confirm('入力途中のデータがあります。ページを離れますか？');

    if (!leavePage) {
      // 離脱を拒否する場合：再度pushStateを発行して履歴を押し戻し、ページを維持する
      history.pushState({ page: 'detected' }, '', location.href);
    } else {
      // 離脱を許可する場合：ブラウザの本来の戻る挙動を実行させる
      history.back();
    }
  });
});

/**
 * ページのロードタイプ（遷移種別）を取得する判定関数
 * @returns {'navigate' | 'reload' | 'back_forward' | 'prerender' | 'unknown'}
 */
function getPageNavigationType(){
  // Navigation Timing API Level 2 のサポート確認
  const navigationEntries = performance.getEntriesByType('navigation');

  if (navigationEntries.length > 0) {
    const navTiming = navigationEntries[0];
    // navTiming.type には以下のいずれかが格納される:
    // 'navigate': 通常のリンクアクセス、アドレスバー入力、フォーム送信
    // 'reload': リロード（F5、更新ボタン）
    // 'back_forward': ブラウザの「戻る」または「進む」による遷移
    // 'prerender': プレレンダリングからの遷移
    return navTiming.type;
  }

  return 'unknown';
}

// 実行例
window.addEventListener('DOMContentLoaded', () => {
  const navType = getPageNavigationType();

  switch (navType) {
    case 'back_forward':
      console.log('このページは「戻る」または「進む」ボタンで表示されました。');
      // キャッシュデータの更新処理や、モーダル状態の復元処理を実行
      break;
    case 'reload':
      console.log('このページは再読み込み（リロード）されました。');
      break;
    case 'navigate':
      console.log('このページは通常の遷移で表示されました。');
      break;
  }
});

// Navigation API の利用可能チェック
if ('navigation' in window) {

  // navigate イベントで全てのナビゲーションをキャッチ
  window.navigation.addEventListener('navigate', (event) => {

    // 1. 遷移の種類を判定
    // event.navigationType には 'push', 'reload', 'replace', 'traverse' が入る
    // 'traverse' は「戻る」「進む」など履歴間の移動を示す
    if (event.navigationType === 'traverse') {
      console.log('ブラウザバックまたは進むが発生しました。');

      // 遷移先の履歴エントリー情報を確認
      const destinationEntry = event.destination;
      console.log('遷移先URL:', destinationEntry.url);
      console.log('遷移先インデックス:', destinationEntry.index);

      // 2. 必要に応じて非同期処理を実行しつつ遷移をインターセプト（中断・オーバーライド）
      event.intercept({
        async handler() {
          // 例: 遷移前にサーバーへ状態を保存する、またはUIアニメーションを実行する
          await saveCurrentStateData();
          console.log('遷移前処理が完了しました。');
        }
      });
    }
  });

} else {
  // Navigation API 非対応ブラウザ（Safari/Firefox等）向けのフォールバック処理
  console.warn('Navigation API is not supported in this browser. Fallback to popstate.');
}

<!-- HTML要素例 -->
<div id="status-message">画面を操作してください</div>

// ページ読み込み完了時に履歴を初期化
window.addEventListener('DOMContentLoaded', () => {
  // 1. 現在のページにダミーの履歴エントリーを追加（現在のURLを変更せずにスタックを追加）
  history.pushState({ page: 'initial' }, '', location.href);

  // 2. popstate イベントリスナーの登録
  window.addEventListener('popstate', (event) => {
    // ブラウザバック発生時の処理
    const statusEl = document.getElementById('status-message');
    if (statusEl) {
      statusEl.textContent = 'ブラウザバックが検知されました！';
    }

    console.log('ブラウザバック検知:', event.state);

    // ページに留まらせたい場合は、再度 pushState を発行して履歴スタックを復元
    // history.pushState({ page: 'initial' }, '', location.href);
  });
});

<!-- モーダルUI構造 -->
<button id="open-modal-btn">モーダルを開く</button>

<div id="modal-overlay" class="modal" style="display: none;">
  <div class="modal-content">
    <h2>モーダルタイトル</h2>
    <p>ブラウザバックを押すとこのモーダルだけが閉じます。</p>
    <button id="close-modal-btn">閉じる</button>
  </div>
</div>

class ModalController{
  constructor(modalId) {
    this.modal = document.getElementById(modalId);
    this.isOpen = false;
    this.init();
  }

  init() {
    // popstate イベントの監視
    window.addEventListener('popstate', (event) => {
      // 履歴ステートが modal-open でない（戻るが押された）かつ モーダルが開いている場合
      if (this.isOpen && (!event.state || !event.state.isModalOpen)) {
        this.closeModal(false); // 履歴操作を伴わないクローズ
      }
    });
  }

  // モーダルを開く
  openModal() {
    if (this.isOpen) return;

    this.isOpen = true;
    this.modal.style.display = 'block';

    // 1. モーダルが開いた状態を履歴スタックに追加
    history.pushState({ isModalOpen: true }, '', location.href);
  }

  // モーダルを閉じる
  // @param {boolean} triggerHistory - 手動で閉じた際に history.back() を呼ぶか
  closeModal(triggerHistory = true) {
    if (!this.isOpen) return;

    this.isOpen = false;
    this.modal.style.display = 'none';

    // 2. ボタンクリック等で手動で閉じた場合は、追加した履歴エントリーを1つ戻す
    if (triggerHistory && history.state && history.state.isModalOpen) {
      history.back();
    }
  }
}

// 初期化とイベントの紐付け
document.addEventListener('DOMContentLoaded', () => {
  const modalUI = new ModalController('modal-overlay');

  document.getElementById('open-modal-btn').addEventListener('click', () => {
    modalUI.openModal();
  });

  document.getElementById('close-modal-btn').addEventListener('click', () => {
    modalUI.closeModal(true);
  });
});

// ページ離脱・戻り時のスクロール位置復元 & データ再取得モジュール
const ProductListManager = {
  storageKey: 'scroll_position_list_page',

  init() {
    // 1. ページ離脱前に現在のスクロール位置を保存
    window.addEventListener('beforeunload', () => {
      sessionStorage.setItem(this.storageKey, window.scrollY.toString());
    });

    // 2. popstate（ブラウザバック）発生時の処理
    window.addEventListener('popstate', async (event) => {
      console.log('ブラウザバックによる復元を開始します。');

      // 非同期で最新データを再取得（キャッシュ無効化オプションを指定）
      await this.refreshProductList();

      // スクロール位置の復元
      this.restoreScrollPosition();
    });

    // 初期表示時のスクロール復元チェック（BFCache非対応環境向け）
    this.restoreScrollPosition();
  },

  // Ajaxによるデータ最新化
  async refreshProductList() {
    try {
      const response = await fetch('/api/products', {
        headers: { 'Cache-Control': 'no-cache' }
      });
      if (!response.ok) throw new Error('ネットワークエラー');

      const data = await response.json();
      this.renderList(data);
    } catch (error) {
      console.error('データ更新に失敗しました:', error);
    }
  },

  // DOM描画処理
  renderList(products) {
    const container = document.getElementById('product-list');
    if (!container) return;

    container.innerHTML = products.map(item => `
      <div class="product-card" data-id="${item.id}">
        <h3>${item.name}</h3>
        <p>価格: ¥${item.price.toLocaleString()}</p>
      </div>
    `).join('');
  },

  // スクロール位置の復元
  restoreScrollPosition() {
    const savedPosition = sessionStorage.getItem(this.storageKey);
    if (savedPosition !== null) {
      // DOM描画完了後に指定位置へスクロール
      requestAnimationFrame(() => {
        window.scrollTo({
          top: parseInt(savedPosition, 10),
          behavior: 'instant' // 瞬時に移動
        });
        // 復元後はキーを削除
        sessionStorage.removeItem(this.storageKey);
      });
    }
  }
};

// 実行
document.addEventListener('DOMContentLoaded', () => ProductListManager.init());

// フォームの編集状態を管理するフラグ
let isFormDirty = false;

document.addEventListener('DOMContentLoaded', () => {
  const form = document.getElementById('checkout-form');
  if (!form) return;

  // 1. フォーム内の入力フィールドに変更があった場合、フラグをONにする
  form.addEventListener('input', () => {
    isFormDirty = true;
  });

  // 2. フォーム送信時（正常な離脱）は警告を出さないようにフラグをOFFにする
  form.addEventListener('submit', () => {
    isFormDirty = false;
  });

  // 3. ページ離脱・ブラウザバック時の警告イベント設定
  window.addEventListener('beforeunload', (event) => {
    // フォームが編集されていない場合はダイアログを表示しない
    if (!isFormDirty) return;

    // モダンブラウザにおける標準的な離脱警告の設定方法
    event.preventDefault();
    // Chrome / Edge 等でダイアログ表示に必要（戻り値としてカスタムテキストを指定しても現代のブラウザでは無視され標準文面が表示される）
    event.returnValue = '';
  });
});

<!-- 決済実行フォーム画面 -->
<form id="payment-form">
  <input type="hidden" name="csrf_token" value="ONETIME_TOKEN_123456" />
  <button type="submit" id="submit-btn">決済を確定する</button>
</form>

document.addEventListener('DOMContentLoaded', () => {
  const form = document.getElementById('payment-form');
  const submitBtn = document.getElementById('submit-btn');

  if (!form) return;

  form.addEventListener('submit', async (event) => {
    event.preventDefault();

    // 二重連打・連続送信を防止
    submitBtn.disabled = true;

    try {
      // 決済API呼び出し（非同期通信）
      const response = await fetch('/api/checkout', {
        method: 'POST',
        body: new FormData(form),
      });

      const result = await response.json();

      if (result.success) {
        // 【重要】送信成功時、現在の「入力画面」の履歴を「完了画面」のURLで完全に上書きする
        // これにより、完了画面で戻るボタンを押しても送信直前の入力画面には戻らなくなる
        history.replaceState(null, '', '/checkout/complete');

        // 完了画面のDOM表示に切替（ページ遷移を行わない）
        showCompleteScreen();
      } else {
        alert('決済処理に失敗しました。');
        submitBtn.disabled = false;
      }
    } catch (error) {
      console.error('通信エラー:', error);
      submitBtn.disabled = false;
    }
  });
});

// 完了画面のDOM切り替え処理関数
function showCompleteScreen() {
  const container = document.getElementById('checkout-container');
  if (container) {
    container.innerHTML = `
      <div class="checkout-complete">
        <h2>決済が正常に完了しました</h2>
        <p>ご注文ありがとうございました。確認メールをお送りしました。</p>
      </div>
    `;
  }
}

// スワイプバックによる画面遷移時、ジェスチャーの途中で popstate が発生するタイミング
window.addEventListener('popstate', (event) => {
  // 注意: iOS Safariでは、スワイプアニメーションが完了するまで
  // DOMの変更や重いJavaScript処理が画面描画に反映されない場合がある
  console.log('ジェスチャーによるバックを検知');
});

【通常のページ遷移】
離脱 ──> サーバーリクエスト ──> DOM構築 ──> loadイベント発火 ──> JavaScript初期化

【BFCacheによる復元】
離脱 ──> (メモリ保存) ──(戻る)──> メモリから即復元 ──> pageshowイベント発火 (※loadは発火しない)

// ページ表示時に毎回発火する pageshow イベントを登録
window.addEventListener('pageshow', (event) => {
  // event.persisted が true の場合、BFCache（キャッシュ）から復元されたことを示す
  if (event.persisted) {

    console.log('このページは BFCache から復元されました。データを再取得します。');

    // 1. 最新データの再取得（Ajax）
    fetchLatestData();

    // 2. セッション状態やフォームの表示・UIの初期化
    resetUIState();

  } else {
    console.log('通常の新規読み込み（初回アクセスまたはリロード）です。');
  }
});

function fetchLatestData(){
  // キャッシュを回避して最新のステータスを取得する処理
  fetch('/api/user/status', { cache: 'no-store' })
    .then(res => res.json())
    .then(data => {
      // DOMの更新処理
    });
}