解决IOS设备浏览器返回或前进时从无法执行某操作

知兮丶青 js · 缓存

阅读(586) 2021-04-07

发现在ios设备浏览器中返回上一个页面是从浏览器缓存中读取的，在跳转到另一个页面前的一些操作，如“加载中”，在另一个页面点击返回时“加载中”状态依然存在，相应js并没有触发执行，现在想对浏览器返回是从缓存中读取的也进行取消“加载中”状态。

解决ios返回js不执行

onpageshow 事件在用户浏览网页时触发，onpageshow 事件在每次加载页面时触发（包括在页面从浏览器缓存中读取时）。

window.onpageshow = function(event) {
    //TODO
};
//或者
window.addEventListener('pageshow', function(event) {
    //TODO
});

判断从缓存加载和前进后退

1、为了查看页面是直接从服务器上载入还是从缓存中读取，你可以使用 PageTransitionEvent 对象的 persisted 属性来判断，如果页面从浏览器的缓存中读取该属性返回 ture，否则返回 false 。

2、为了判断网页通过前进或后退按钮加载，你可以使用 window.performance.navigation.type 类型来判断，常量 TYPE_BACK_FORWARD 值为 2 ，是网页通过前进或后退按钮加载。

if(event.persisted || (window.performance && 
window.performance.navigation.type == window.performance.navigation.TYPE_BACK_FORWARD)){
    //TODO
}

完整demo例子

page1.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <title>ios history.go(-1) page1</title>
        <script type="text/javascript" src="jquery-2.1.4.js"></script>
        <script type="text/javascript">
            window.onpageshow = function(event){
                //是否从浏览器缓存中读取 或 是否网页通过前进或后退按钮加载
                if(event.persisted||(window.performance && window.performance.navigation.type==window.performance.navigation.TYPE_BACK_FORWARD)){
                    hideLoading();
                }
            };
            //或者
            //window.addEventListener('pageshow', function(event) {
            //    if(event.persisted||(window.performance && window.performance.navigation.type==window.performance.navigation.TYPE_BACK_FORWARD)){
            //        hideLoading();
            //    }
            //});
            function jumpPage2(){
                showLoading();
                window.location.href = 'page2.html';
            }
            function showLoading(){
                $('body').append('<p>正在跳转</p>');
            }
            function hideLoading(){
                $('body').find('p').remove();
            }
        </script>
    </head>
    <body>
        <h1>这是第一个页面</h1>
        <a href="javascript:jumpPage2();">page2.html</a>
    </body>
</html>

page2.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <title>ios history.go(-1) page2</title>
    </head>
    <body>
        <h1>这是第二个页面</h1>
        <a href="javascript:history.go(-1);">返回</a>
    </body>
</html>

测试设备

PC设备浏览器：

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.183 Safari/537.36

IOS设备浏览器：

Mozilla/5.0 (iPhone; CPU iPhone OS 13_6 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.1.2 Mobile/15E148 Safari/604.1

原创文章，转载请注明出处：https://www.weizhixi.com/article/114.html