未保存変更時の遷移ブロック

フォーム編集中にユーザーが他ページへ遷移しようとした際、確認ダイアログを挟んで離脱を抑止するサンプルです。beforeunload では iOS Safari で動かない用途を、Navigation API の navigate イベントで実装します。

1. テスト用フォーム

テキストを編集すると「未保存」状態になります。状態は画面右上のバッジで確認できます。

状態: clean

2. ブロック方式を切り替える

A. preventDefault + 自前モーダル B. intercept({ precommitHandler }) C. beforeunload のみ（比較用・iOS では発火しない）ブロックしない

A/B モードに beforeunload 併用（ブラウザ UI のリロード/タブ閉じも捕捉）

仕様メモ: ブラウザの🔄リロードボタン / 🔙戻る / タブ閉じなど ブラウザ UI 起点 の navigate イベントは cancelable: false になります（ユーザートラップ防止）。これらを補完したい場合は beforeunload を併用してください。ただし iOS Safari では beforeunload が発火しないため、リロードボタン抑止は不可です。

A/B の違い: A はクロスオリジン遷移にも効きます。B は同一オリジン同一ドキュメントのみで、非同期確認後に処理を続行できます（Safari 26.3+ で利用可）。

3. 離脱を試す

同一ページのフラグメント同一オリジン（クエリ）クロスオリジン (example.com)

4. ログ

ナビゲーション操作の結果がここに出ます。

アンカーターゲット

フラグメント遷移用のターゲット領域です。