engiside-labs/ navigate-event/ observer engiside.com →

navigate イベント観察ツール

Navigation API の navigate イベントが発火するたびに、NavigateEvent の各プロパティを記録します。さまざまな種類のナビゲーションを発生させて、何が取得できるかを確認できます。

1. ナビゲーションを発生させる

クリックすると navigate イベントが発火します。実際の URL 変更は intercept() で観察のみに抑えています。

同一ページのフラグメント クエリ付き同一オリジン クロスオリジン (example.com) download 属性付き

2. イベントログ

0 件
ここに NavigateEvent が表示されます。
ログに含まれるプロパティの意味
  • navigationType: push / reload / replace / traverse
  • canIntercept: intercept() できるか(クロスオリジンは false)
  • userInitiated: ユーザー起点(クリック等)か
  • hashChange: 同一ドキュメント内のフラグメント遷移か
  • cancelable: preventDefault / precommitHandler でキャンセル可能か
  • destination.url: 遷移先 URL
  • destination.sameDocument: 同一ドキュメント遷移か
  • downloadRequest: download 属性のファイル名
  • formData: POST 送信時のフォームデータ
  • sourceElement: 発火元の DOM 要素

3. 簡易ターゲット領域

「同一ページのフラグメント」リンクのアンカー先です。フラグメント遷移時にここまでスクロールします。