html5返回上一页不刷新,javascript解决在safari浏览器中使用history.back()返回上一页后页面不会刷新的问题...

我们知道,在JavaScript中提供了一个window.history.back()方法用于返回上一页,另外也可以使用window.history.go(-1)返回上一页(跳转)。

在其他的主流浏览器中(Chrome、Firefox等),使用这两个方法都会重新执行返回页面的JS。

这就意味着,当文档加载完成事件函数中有刷新页面的操作代码的情况下,上一个页面会刷新。

但是在Safari浏览器中则情况有一些不同。

在实际测试中,在移动端中Android设备都会刷新,但是在IOS设备的Safari浏览器中却不会,这是因为Safari浏览器不会重新执行返回页面的JS导致的问题。

那么我们就可以通过窗体显示隐藏的监听事件(HTML5中新增的onpageshow和onpagehide)来对页面进行手动刷新操作。

$(function() {var isPageHide = false;

window.addEventListener(‘pageshow‘, function() {if(isPageHide) {

window.location.reload();

}

});

window.addEventListener(‘pagehide‘, function() {

isPageHide= true;

});

})

将上面这段代码添加在文档加载完成事件中,就能在返回上一页的时候触发窗体刷新的方法了。

这里有一些疑问,既然说这个问题是因为Safari浏览器返回上一页不会重新执行返回页面的JS导致的,为什么上面这段JS代码也会被执行呢,这里简单说一下原因。

在Safari浏览器中,有一个bfcache(Back-Forward Cache,往返缓存)缓存整个页面的特性。当页面在bfcache中的时候,由于内存中保存了整个页面的状态,当从内存中再次取出该页面的情况下,也就不会再触发load事件了。而不同于onload事件只会在文档加载完成之后执行一次,onpageshow事件和onpagehide事件一旦被绑定了,在每次窗体显示隐藏都会被执行。这就意味着,不管页面在不在bfcache中,这两个监听事件都会被执行。另外JavaScript中的PageTransitionEvent对象还提供了一个persisted布尔值属性来判断页面是否从缓存中读取。

window.addEventListener(‘pageshow‘, function(e) {

console.log(e.persisted);

});

如果该页面是从缓存中读取出来的,则打印true,否则打印false。

"表面越是波澜不惊的人,内心越是有一些不为人知的辛酸。"

原文:https://www.cnblogs.com/yanggb/p/11675315.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值