onpageshow 事件及应用

╰半橙微兮° 2022-11-09 12:33 145阅读 0赞

onpageshow 事件在用户浏览网页时触发。

onpageshow 事件类似于 onload 事件，onload 事件在页面第一次加载时触发， onpageshow 事件在每次加载页面时触发，即 onload 事件在页面从浏览器缓存中读取时不触发。和onshow生命周期类似。

#### html中添加onpageshow事件 ####

<!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方法无效请使用window对象添加

#### window对象中添加onpageshow事件 ####

performance.navigation.type（该属性返回一个整数值，表示网页的加载来源，可能有以下4种情况）：  
　　0：网页通过点击链接、地址栏输入、表单提交、脚本操作等方式加载，相当于常数performance.navigation.TYPE\_NAVIGATE。  
　　1：网页通过“重新加载”按钮或者location.reload()方法加载，相当于常数performance.navigation.TYPE\_RELOAD。  
　　2：网页通过“前进”或“后退”按钮加载，相当于常数performance.navigation.TYPE\_BACK\_FORWARD。  
　　255：任何其他来源的加载，相当于常数performance.navigation.TYPE\_RESERVED。  
　performance.navigation.redirectCount：表示网页经过重定向的次数。

<!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>