在微信浏览器中,从一个html跳到另外一个html页面后,点击浏览器自带的历史返回按钮,或者在第二个页面中调用history.back()等返回上一页方法,在安卓中直接会返回上一页(相当于重新加载上一页所有内容和逻辑,js会重新在执行一遍),但是在苹果端中,返回到上一页是,浏览器会读取缓存中的页面内容(回到上一页,会保持跳转时的状态,包括刚才浏览的位置,但是js不会在重新执行,因为是直接读取缓存中的),这种缓存被称作“往返缓存”,是为了提高用户在触发“返回”或者“前进”时页面的响应速度。这个缓存不仅保存页面所有数据,还保存着页面DOM和JS的状态,如果页面处于“往返缓存”中,在次进入这个页面将不会触发 onload 事件。
苹果系统的这种默认行为对于用户浏览列表,点击某个单个产品,查看详情,在返回上一页列表页的情况下,表现较好,因为会保持状态,默认回到上一个列表页的位置,但是在需要根据接口返回code或者value去判断某种状态的时候会产生很多问题,因为js不会重新执行,所有判断条件也就无法执行。所有当页面被保存在“往返缓存”中,时,我们可以想办法去不让浏览器从缓存中读取页面,而是重新加载页面内容
解决方法:
1:
window.addEventListener("popstate", function (e) {
//检测到用户点击浏览器返回按钮,进行操作
console.log(document.referrer);
//使用href的形式去用跳转的形式,跳转到上一页
document.location.href = document.referrer;
}, false);
var state = {
title: "",
url: ""
};
window.history.pushState(state, "", "");
2:
onpageshow事件(这个事件在页面显示时触发,如果页面不在“往返缓存”中,该事件将会在onload后触发)
在onpageshow事件中,可以利用event.persisted
window.addEventListener('pageshow', function(event) {
alert(event.persisted);
if (event.persisted) location.reload(); //如果检测到页面是从“往返缓存”中读取的,刷新页面
});
3:
指定了 onunload 事件处理程序的页面会被自动排除在 “往返缓存”之外,即使事件
处理程序是空的。原因在于, onunload 最常用于撤销在 onload 中所执行的操作,
而跳过 onload 后再次显示页面很可能就会导致页面不正常。
window.addEventListener('unload',function () {
})