武汉兼职女:点击浏览器或者手机返回按钮,刷新历史页面解决方案

武汉兼职女:点击浏览器或者手机返回按钮,刷新历史页面解决方案

我前面文章中写了返回上一页并刷新页面 的方式。这个是我们点击某个按钮,来进行操作的。但是假如我们不是点击某个按钮,而是直接点击手机下面的返回按钮或者浏览器自带返回按钮,如何刷新之前的历史页面呢?

应用场景
假如我们有如下页面列表信息页面

enter image description here

点击进入详情页面,在详情页面修改了数据。

enter image description here

通过历史返回,再返回到列表信息页面,因为列表信息是历史返回的,还是默认显示原来修改前的数据,要刷新一下才是修改后的数据。那么我们通过什么方式可以点击手机返回按钮或者浏览器返回,就能刷新之前历史页面中的数据呢?

相关知识
onpageshow事件和onload事件。 onpageshow 事件类似于 onload 事件,onload 事件在页面第一次加载时触发, onpageshow 事件在每次加载页面时触发,即 onload 事件在页面从浏览器缓存中读取时不触发。

为了查看页面是直接从服务器上载入还是从缓存中读取,你可以使用 PageTransitionEvent 对象的 persisted 属性来判断。 如果页面从浏览器的缓存中读取该属性返回 ture,否则返回 false

解决方案
一、通过onload方式

代码如下:

页面中写一个隐藏的input

<input type="hidden" id="refreshed" value="no">
js操作如下

onload=function(){
var refreshedId=document.getElementById("refreshed");
if(refreshedId.value=="no"){
refreshedId.value="yes";
} else{
refreshedId.value="no";
location.reload();
}
}
二、通过onpageshow 方式

这种方式在电脑上是没有问题的,但是苹果safari中返回不执行onload事件,要用如下方式:

window.onpageshow = function(event) {
if (event.persisted) {
window.location.reload()
}
};
通过实际操作发现,event.persisted在电脑中一直是返回false,但是在手机safari中是没有问题的。

三、综合解决方案

因此,可以如下写代码:

if ((/iphone|ipod|ipad.*os 5/gi).test(navigator.appVersion)) {
window.onpageshow = function(event) {
if (event.persisted) {
window.location.reload()
}
};
}else{
onload=function(){
var refreshedId=document.getElementById("refreshed");
if(refreshedId.value=="no"){
refreshedId.value="yes";
} else{
refreshedId.value="no";
location.reload();
}
}
}
通过上面代码发现在safari中第一次打开页面的时候,有时候会出现闪屏效果。

添加如下代码:

$(window).bind("unload", function() { });
就没有再出现闪屏效果了。

4、通过iframe方式阻止缓存

页面中添加如下代码

<iframe style="height:0px;width:0px;visibility:hidden" src="about:blank">
this prevents back forward cache
</iframe>
这种方式有待验证。

5、清除缓存方式

我之前博客中也写过清除浏览器缓存的几种方式,武汉兼职女www.rfwcom.com/forum-81-1.html但是这种方式,经过验证,不起作用。

6、通过时间戳强制刷新方式

下面代码是针对iPad中safari返回按钮问题

var showLoadingBoxSetIntervalVar;
var showLoadingBoxCount = 0;
var showLoadingBoxLoadedTimestamp = 0

function showLoadingBox(text) {

var showLoadingBoxSetIntervalVar=self.setInterval(function(){showLoadingBoxIpadRelaod()},1000);
showLoadingBoxCount = 0
showLoadingBoxLoadedTimestamp = new Date().getTime();

//Here load the spinner

}

function showLoadingBoxIpadRelaod()
{
//计算时间超过500毫秒
var diffTime = ( (new Date().getTime()) - showLoadingBoxLoadedTimestamp - 500)/1000;

showLoadingBoxCount = showLoadingBoxCount + 1;
var isiPad = navigator.userAgent.match(/iPad/i) != null;

if(diffTime > showLoadingBoxCount && isiPad){
location.reload();
}
}

时间: 2024-10-12 23:02:04

武汉兼职女:点击浏览器或者手机返回按钮,刷新历史页面解决方案的相关文章

武汉兼职女: 制作h5婚礼邀请函动画总结

武汉兼职女: 制作h5婚礼邀请函动画总结 很多网上的婚纱摄影公司,或者婚庆公司,或者一些h5制作平台,都可以做一些婚礼邀请函,但是这样的婚礼邀请函千篇一律.没有什么特色,仅仅是图片展示.在某人的强烈要求之下,我制作了一个h5婚礼邀请函(目前源码暂时不公开吧,过段时间再说).用到了一些知识和小技巧,在这里简单总结一下! transform 中透视效果应用动画的书写,自然少不了transform ,像translate3d.rotate.scale3d的应用,相信大家都很熟练了.假如不熟练的,可以看

L--怎样让用户点击浏览器后退按钮刷新后退页面的验证码

介绍 项目需要,怎样让用户点击浏览器后退按钮刷新后退页面的验证码,通过cookie来解决 方法一(通过设置前台html)(失败) 本想通过控制html的http-equiv属性来解决问题,如下 http-equiv属性 1.<meta http-equiv="Content-Type" contect="text/html";charset=gb_2312-80"> 和 <meta http-equiv="Content-Lan

使用ionic开发时用遇到监听手机返回按钮的问题~

当时用的是ionic开发一个app,需求是,当按下手机的返回按钮,在指定的页面双击退出,而在其他页面点击一次返回到上个页面: 其实用ionic自带的服务就可以解决:  //双击退出   $ionicPlatform.registerBackButtonAction(function (e) {   //判断处于哪个页面时双击退出    if($location.path() =='/message' || $location.path() =='/work' || $location.path(

在微信、支付宝、百度钱包实现点击返回按钮关闭当前页面和窗口

最近在使用微信.支付宝.百度钱包实现网页支付,对支付成功将自动关闭页面,对于支付失败,将显示错误信息.当在错误页面的时候,点击返回 或者Android物理按键上一步的时候,将关闭页面. 在微信.支付宝.百度钱包中,他们对页面关闭进行了封装,传统的window.close()是无效的,必须要使用它们的js代码才能关闭.下面是三种移动app 的关闭方式: WeixinJSBridge.call('closeWindow');//微信 AlipayJSBridge.call('closeWebview

防止点击asp.net的button按钮刷新页面(保留button的外观)

原文发布时间为:2008-08-06 -- 来源于本人的百度文章 [由搬家工具导入] Button btn=new Button(); 1、如果用 btn.Enabled=false;是可以防止刷新的,但是不能点击,而且button的外观变成了凹下去的,很难看 2、所以我找到了解决方法。这个方法很好,如下: btn.Attributes.Add("onClick","return false"); 加上这句,button的外观仍然保持可单击状态,可以单击,而且不刷新

微信浏览器 返回按钮二次返回

在做微信开发的时候,当通过微信的推送消息(页面1)打开网页后(进入页面2),此时,再次打击链接打开网页(页面3).当点击安卓手机的返回按钮时,可以正常回退到"页面2",但是当点击微信左上角的返回按钮时,会直接回退到"页面1". 起初感觉是加载浏览器插件的原因,思考了好久不得结果.后来发现"招商银行信用卡中心"官方微信,并不存在上述问题.观察招商银行的官方微信发现,页面2的title是微信定义的title,但是页面3的title变成了用户自定义的t

解决微信浏览器访问手机页面:您访问的页面无手机页面,是否进一步访问电脑版?

dz论坛总是报502没办法了,发到这里备份. 这个问题困扰楼主很长时间了,具体原因因为不懂php没去研究源码,所以只能用js解决了.也就是大家常见的通过修改source\language\lang_message.php里的not_in_mobile强制刷新页面,具体修改方法是将提示信息改成 '<meta http-equiv="refresh" content="5" />' 但是这个问题在微信浏览器下是不完全好使的,在朋友圈分享以后这个标签是不自动刷

chrome浏览器模拟手机 地理定位

chrome浏览器模拟手机 地理定位 在pc端做touch页面调试的时候,常常会遇到需要模拟定位的情况 chrome浏览器有着强大的调试工具,尤其是新版chrome浏览器 下面我就以新版chrome浏览器为例,模拟下如何用电脑模拟手机定位 1.首先 F12 调出控制台 2. 点击这个小手机调出手机模拟器 3.选择一款手机 4.如图所示,选择emulation -- sensors  --- coordinates  需要手动填写纬度和经度 酱紫就可以模拟定位啦,是不是很简单,嘻嘻!~^_^

点击浏览器关闭按钮给出提示

当无意中点击浏览器的关闭按钮时,如果不给出提示就关闭,有些信息会丢失掉.下面的代码给出了提示. 1 <script language="javascript" type="text/javascript"> 2 window.onbeforeunload=function () { 3 return ("离开此网页,你的此次考试信息将会丢失,你确定吗? "); 4 } 5 </script>