zoukankan      html  css  js  c++  java
  • iso移动Safari页面缓存

    iso在某些方法为了追求更好的客户体验真的很棒,但也让它和别的浏览器不一样,让开发人员头痛的很。

    比如最近做一个项目,但都不能分享,但出现了很不好的效果,在当前页面时是禁止分享了,但当前页到

    下一个页面后后退到之前的当前页就出现了分享功能了,这是Safari特殊的缓存机制效果,就是有点像单页面

    应用可以来回切换页面而启用和暂定页面,而不是刷新页面部分功能,比如安卓,虽然有缓存机制,但它只是缓存

    某些功能,比如滚动高度等,它还是会执行js文件的,但iso不是这样,它是暂定页面功能,当你切换回来还会继续

    执行上一次执行的代码,比如我在页面设置一个定时器,当切换回来还会接上一次继续执行。

    所有Safari鼓励我们使用window.onpageshow事件来触发某些因切换回来需要执行的代码,如触发微信内置的方法,

    因为微信在这方法是和安卓的一样,会刷新功能,所以你需要触发某些内置方法,变回初始进来页面的所需的效果。

    资料:传送门 这方面资料还是国外比较全,国内的资料大部分一些垃圾,没有一些全面性,而且方法统一有bug。

    如使用popstate,pushState配合使用,这也有个很大坑就是刷新页面会出现两次后退才能后退。。。。

    而国外有popstate,pushState,浏览器本地缓存配合使用。。。这个方法逻辑复杂很

    popstate,replaceState这个比较简单。

    还有就是pageshow,persisted,这个好用

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>pageshow测试</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
        <script src="jquery-3.1.0.min.js"></script>
        <link rel="stylesheet" href="jquery-ui-1.12.1/jquery-ui.css">
        <script src="jquery-ui-1.12.1/jquery-ui.js"></script>
        <style>
        .b{
            margin-top: 300px;
            height: 1000px;
        }
        button{
            width: 100%;
            height: 30px;
        }
        button a{
            width: 100%;
            display: block;
        }
        </style>
    </head>
    <body>
        <div class="b">
        <p id="times"><span>计数:</span><span id="t"></span></p>
            <button><a href="2.html">pagehide测试</a></button>
            <p id="p"></p>
            <p id="p3"></p>
            <p id="p4"></p>
            
        </div>
        <script>
        var i=0;
        setInterval(function(){
            i++;
            $("#t").html(i);
        },1000);
    
         $(window).on("pageshow",function(event){
             $("#p4").html("是否缓存:"+event.originalEvent.persisted);
              $("#p3").html('pageshow');
              WeixinJSBridge.call('hideToolbar');
                WeixinJSBridge.call('hideOptionMenu');
                $("#p").html('WeixinJSBridgeReady'+i);
            });
         document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
                WeixinJSBridge.call('hideToolbar');
                WeixinJSBridge.call('hideOptionMenu');
                $("#p").html('WeixinJSBridgeReady');
            });
    
              function isiOS(){
                      var u = navigator.userAgent;
                    var isWeiXin = u.indexOf('MicroMessenger') > -1; //微信
                    var isiOS = !!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
                    if(isWeiXin&&isiOS){
                        return true;
                    }else{
                        return false;
                    }
                }
    
        </script>
    </body>
    </html>

    onpageshow和onpagehide    

    event对象也包含persisted属性

  • 相关阅读:
    前端一些词汇的缩写
    github上值得关注的前端项目
    window注册表
    注册表删除chrome插件
    js二维码扫描
    git push --no-thin
    mac下app store 无法完成您的购物操作
    git终端提示符
    mac 下 apache设置
    windows 下 apache设置
  • 原文地址:https://www.cnblogs.com/zhangzhicheng/p/7400765.html
Copyright © 2011-2022 走看看