Navigation API navigate イベント 検証セット
2026年1月に Baseline Newly available となった Navigation API の navigate イベントについて、画面遷移制御の挙動を実機で確認できるデモ集です。engiside の解説記事と対になる一次資料として公開しています。
デモ
1. navigate イベント観察ツール
push / replace / reload / traverse / フラグメント / クロスオリジン / download / POST フォーム など、さまざまな種類のナビゲーションを発生させ、
NavigateEvent の各プロパティをログ表示します。2. 未保存変更時の遷移ブロック
フォーム編集中の離脱を、
preventDefault・intercept({ precommitHandler })・beforeunload の各方式で比較できます。iOS Safari と desktop の挙動差も再現します。動作確認の前提
- Chrome / Edge 102+、Firefox 134+、Safari 26+（iOS Safari 26+ 含む）
file://でも一部動きますが、HTTP 経由（python -m http.server等）での確認を推奨します- 同一オリジン遷移は
intercept()で抑制しているため、URL は変わっても画面は遷移しません
関連記事
- engiside「Navigation API の navigate イベントで画面遷移を制御する」（記事公開後にリンクを差し替え）