Javascript MEMO

日本語

ENGLISH

戻る処理を判定

pageshowイベントとperformance.getEntriesByType

pageshowイベントは、ページが読み込んだケース、もしくはbfcacheから復元されたケースに発生します。
このイベント内でperformance.getEntriesByTypeを実行するとtypeプロパティを確認できます。

[サンプル]

const btn = document.getElementById("btn");
btn.addEventListener("click", () => 
{
window.location.href="../test.html";
});
window.addEventListener('pageshow', (event) => 
{
if (event.persisted) 
{
console.log('this page recovery from bfcache. (back・forward)');
} 
else 
{
const entries = performance.getEntriesByType('navigation');
if (entries.length > 0) 
{
const navType = entries[0].type;
if (navType === 'back_forward') 
{
console.log('tap back or forward button. (except bfcache)');
} 
else if (navType === 'reload') 
{
console.log('reload page');
} 
else if (navType === 'navigate') 
{
console.log('normal navigation');
}
}
}
});

window.addEventListener('pageshow', (event) =>

ページが読み込んだケース、もしくはbfcacheから復元されたケースに発生します。
bfcacheは、ユーザーが戻る・進む操作をした際に、ページを完全に再読み込みせずに、
メモリにキャッシュされたページの状態を復元する仕組みです。
このイベント内でperformance.getEntriesByTypeを実行すれば、
typeプロパティを確認できます。

if (event.persisted)

ページがbfcacheから復元したケースに実行されます。(戻る・進む)

const entries = performance.getEntriesByType('navigation');

通常の読み込み時にnavigationエントリを取得

if (navType === 'back_forward')

戻る・進むボタンが押されました (bfcache以外)

戻る

著作権情報

ホームページおよびアプリ等に掲載されている情報等については、いかなる保障もいたしません。
ホームページおよびアプリ等を通じて入手したいかなる情報も複製、販売、出版または使用させたり、
または公開したりすることはできません。
当方は、ホームページおよびアプリ等を利用したいかなる理由によっての障害等が発生しても、
その結果ホームページおよびアプリ等を利用された本人または他の第三者が被った損害について
一切の責任を負わないものとします。