iso移动Safari页面缓存
Posted 小数点就是问题
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>
event对象也包含persisted属性
以上是关于iso移动Safari页面缓存的主要内容，如果未能解决你的问题，请参考以下文章