こんにちは、技術部の K です。
今回はリンクからのアクセスとページリロードの判定処理についてまとめます。
PerformanceNavigation.type は非推奨
PerformanceNavigation.type は「Navigation Timing Level 2」の仕様で非推奨となっています。
PerformanceNavigationTiming を使う
「Performance APIs」で提供されている、PerformanceNavigationTiming を使うことで、ユーザがそのページにアクセスした手段を取得することができます。
Javascript の例
jsx
const navigationEntries = performance.getEntriesByType("navigation");
if (navigationEntries.length > 0) {
const navigationType = navigationEntries[0].type;
if (navigationType === "navigate") {
console.log("navigate");
}
if (navigationType === "reload") {
console.log("reload");
}
if (navigationType === "back_forward") {
console.log("back_forward");
}
if (navigationType === "prerender") {
console.log("prerender");
}
}
Typescript の例
tsx
const navigationEntries = performance.getEntriesByType("navigation");
if (
navigationEntries.length > 0 &&
navigationEntries[0] instanceof PerformanceNavigationTiming
) {
const navigationType = navigationEntries[0].type;
if (navigationType === "navigate") {
console.log("navigate");
}
if (navigationType === "reload") {
console.log("reload");
}
if (navigationType === "back_forward") {
console.log("back_forward");
}
if (navigationType === "prerender") {
console.log("prerender");
}
}
type プロパティの値
全ブラウザでサポートされているようです。
| 値 | 説明 |
|---|---|
| navigate | リンクからの遷移、location.href = “”、ブラウザのアドレスバーへの URL の入力、フォームの送信による遷移など |
| reload | ブラウザの更新操作、location.reload()、そのほかページ更新系の操作 |
| back_forward | ブラウザの戻るボタン、進むボタンによる遷移 |
| prerender | ""による遷移。 |
※現在表示されているページの URL を入力して遷移した場合は reload 扱いになる。
関連記事
- 2024-04-02
- テクノロジー