解决 ios ( Safari ) 返回后页面不刷新的问题

在作H5项目的时候,在ios下当咱们点击左上角的返回按钮,或者安卓上点击后退的时候,发生了两个难以想象的事情:ios

一、页面没有刷新,而是直接读取的缓存。 二、页面上绑定在window上的事件莫名其妙的消失了(例如onscroll)浏览器

这个时候,确定就很天然的联想到了多是微信内核引发的,二微信这次换内核,更换成的是苹果的 WKWebview 内核。Safari很早以前就使用了这个内核,并且微信官方明确表示,更换后,将和Safari 表现出高度的类似性。缓存

因此这个问题就被我当成了 Safari的bug去搜,果真,最终解决办法以下:bash

var browserRule = /^.*((iPhone)|(iPad)|(Safari))+.*$/;
    if (browserRule.test(navigator.userAgent)) {
        window.onpageshow = function(event) {
            if (event.persisted) {
                window.location.reload()
            }
        };
    }
复制代码

首先,咱们须要断定它是 iPhone、iPad或者Safari 的一种,而后针对他们进行特殊处理。服务器

window.onpageshow 是会在页面加载显示后触发,onpageshow 事件相似于 onload 事件,onload 事件在页面第一次加载时触发, onpageshow 事件在每次加载页面时触发,即 onload 事件在页面从浏览器缓存中读取时不触发。微信

为了查看页面是直接从服务器上载入仍是从缓存中读取,你可使用 PageTransitionEvent 对象的 persisted 属性来判断。 若是页面从浏览器的缓存中读取该属性返回 ture,不然返回 false。如上代码所示,若是是从缓存加载的,就刷新页面。spa

以前,reload方法被微信无情的枪毙掉了,可是换了内核以后,这个方法是好用的。code

相关文章
相关标签/搜索