onpageshowイベントは、ユーザーがWebページを閲覧したときにトリガーされます。
onpageshowイベントはonloadイベントに似ています。onloadイベントはページが最初にロードされたときにトリガーされ、onpageshowイベントはページがロードされるたびにトリガーされます。つまり、onloadイベントはページがロードされたときにトリガーされません。ブラウザのキャッシュから読み取られます。オンショーのライフサイクルに似ています。
onpageshowイベントをhtmlに追加します
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html中添加onpageshow事件</title>
</head>
<body onpageshow="myFunction()">
<h1 id="demo"></h1>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "onpageshow事件";
}
</script>
</body>
</html>
addEventListenterイベントを使用して、onpageshowイベントを追加します
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>利用addEventListenter事件添加onpageshow事件</title>
</head>
<body>
<h1 id="demo"></h1>
<script>
//浏览器后退
// 1.
window.addEventListener("pageshow", function(event){
if(event.persisted) {
// do something
}
});
// 2.
window.addEventListenter("pageshow", isBackFun)
function isBackFun(event) {
if(event.persisted) {
// do something
}
}
</script>
</body>
</html>
addEventListenterメソッドが無効な場合は、ウィンドウオブジェクトを使用して追加してください
onpageshowイベントをウィンドウオブジェクトに追加します
performance.navigation.type（このプロパティは整数値を返し、Webページのロード元を示します。次の4つの状況が考えられます）：
0：リンク、アドレスバー入力、フォーム送信、スクリプト操作をクリックしてWebページをロードします。 、など。これは、一定のperformance.navigation.TYPE_NAVIGATEに相当します。
1：Webページは、「reload」ボタンまたはlocation.reload（）メソッドを介してロードされます。これは、一定のperformance.navigation.TYPE_RELOADと同等です。
2：Webページは、「進む」または「戻る」ボタンを介してロードされます。これは、一定のperformance.navigation.TYPE_BACK_FORWARDと同等です。
255：他のソースからの読み込み。一定のperformance.navigation.TYPE_RESERVEDと同等です。
performance.navigation.redirectCount：Webページがリダイレクトされた回数を示します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>window对象中添加onpageshow事件</title>
</head>
<body>
<h1 id="demo"></h1>
<script>
window.onpageshow = function (event) {
//浏览器后退
//只读属性persisted代表一个页面是否从缓存中加载的
if (
event.persisted ||
(window.performance && window.performance.navigation.type == 2)
) {
// window.location.reload();//刷新页面
}
}
</script>
</body>
</html>