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。
"表面越是波澜不惊的人,内心越是有一些不为人知的辛酸。"
javascript解决在safari浏览器中使用history.back()返回上一页后页面不会刷新的问题的更多相关文章
- js中的referrer使用,返回上一页
js完整代码: <script language="javascript"> var refer=document. referrer ; document.g ...
- android studio中Fragment使用webview返回上一页的问题
在Fragment中使用了腾讯的X5 webview,虽然好用,但是在Fragment中传递消息困难,想要返回上一页,还得各种消息传递什么的,麻烦.可是在Fragment中又不能使用onKeyDown ...
- 微信返回上一页,页面中的AJAX的请求,对Get请求无效的解决办法
问题产生原因 最近在做一个微信的项目时,遇到一种很常见的情况,需求是这样的,当用户进入到"我的个人中心"的时候,会有一个点击跳转填写认证资料的按钮,点击此按钮后,会跳转 ...
- js 页面history.back()返回上一页,ios 不重新加载ready的解决办法
参考自 http://blog.csdn.net/hbts_901111zb/article/details/76691900 项目中,主页面有很多输入字段,当由主页跳转到子页面, 将子页面的字段 s ...
- 解决使用window.history.back(),返回上一页后,页面不刷新问题
window.onpageshow = function(event) { if (event.persisted) { window.location.reload(); } }
- 高并发分布式系统中生成全局唯一(订单号)Id js返回上一页并刷新、返回上一页、自动刷新页面 父页面操作嵌套iframe子页面的HTML标签元素 .net判断System.Data.DataRow中是否包含某列 .Net使用system.Security.Cryptography.RNGCryptoServiceProvider类与System.Random类生成随机数
高并发分布式系统中生成全局唯一(订单号)Id 1.GUID数据因毫无规律可言造成索引效率低下,影响了系统的性能,那么通过组合的方式,保留GUID的10个字节,用另6个字节表示GUID生成的时间(D ...
- js中的referrer返回上一页使用介绍
js中的referrer的用法举例. js完整代码: <script language="javascript"> var refer=document.refer ...
- JavaScript返回上一页代码区别
JavaScript返回上一页代码区别: window.history.go(-1); //返回上一页 window.history.back(); //返回上一页 //如果要强行刷新的话就是:win ...
- JavaScript返回上一页和返回上一级页面并刷新
JavaScript返回上一页和刷新当前页 window.history.go(-1); //返回上一页 window.history.back(); //返回上一页 //如果要强行刷新的话就是:wi ...
随机推荐
- Appium 1.15.1版本的appium-doctor不是内部或者外部命令的问题
先讲一下整个app自动化环境的部署过程: 1.安装appium 2.安装nodejs 3.查看appium的环境是否完成 问题:安装appium和nodejs都没啥问题,直接到对应的官网下载然后安装即 ...
- 【tf.keras】tensorflow datasets,tfds
一些最常用的数据集如 MNIST.Fashion MNIST.cifar10/100 在 tf.keras.datasets 中就能找到,但对于其它也常用的数据集如 SVHN.Caltech101,t ...
- python中json与pickle的简要说明
import json ======> 注意:不同语言之间通用但不能传输对象类型 该模块中最重要的方法: 1.json.dump(‘python数据’,‘json文件’) # 将pyt ...
- fiddler 常用命令及快捷键
1.搜索: ? baidu.com 2.bpu 发起请求时中断 设置断点 bpu baidu.com 取消断点:bpu 3.bpafter 收到响应后中断 设置断点:bpafter baidu.c ...
- Python-类的几种调用方法
一:实例 二:静态 可以调用类以外的变量,只限于此模块. 三:类方法 可以调用该类中定义的变量进行使用. 直接上代码
- 对于jenkins上前端项目 npm 或 yarn 打包 及 部署 使用
1.npm和yarn镜像源地址 npmMirror ~~~~~ https://skimdb.npmjs.com/registry/ edunpm ~~~~~~ http://registry.enp ...
- react+ant-mobile+lib-flexible构建移动端项目适应设计图尺寸(750)
使用lib-flexible在react中先安装 npm install lib-flexible --save 因为插件使用的是rem适配,所以安装两个插件 npm install postcss- ...
- [Spring cloud 一步步实现广告系统] 4. 通用代码模块设计
一个大的系统,在代码的复用肯定是必不可少的,它能解决: 统一的响应处理(可以对外提供统一的响应对象包装) 统一的异常处理(可以将业务异常统一收集处理) 通用代码定义.配置定义(通用的配置信息放在统一的 ...
- 松软科技web课堂:JavaScript 数组
JavaScript 数组用于在单一变量中存储多个值. 实例 var cars = ["Saab", "Volvo", "BMW"]; 什么 ...
- xBIM 综合使用案例与 ASP.NET MVC 集成(一)
XbimWebUI是一个Javascript库,可用于BIM模型的Web表示.它使用WebGL并且独立于任何第三方WebGL框架.查看器的数据格式为WexBIM.不能直接加载IFC文件. 一.将IFC ...