JS实现返回上一页并刷新页面的方法分析

本文实例讲述了JS实现返回上一页并刷新页面的方法。分享给大家供大家参考,具体如下:

正常情况下我们通过 history.back() 或者 history.go(-1) 返回上一级页面的时候,是不会刷新页面的。这种不刷新页面包含两种情况:

  1. 在 android 或者 pc 浏览器中看到的页面有刷新的效果,其实不是这样的,这个时候的所有的资源都是从缓存中加载来的。我们通过浏览器调试工具可以看到 from disk cache 或者 from memory cache。
  2. 在 ios 中甚至于返回到了上一页后,连上一页的脚本文件都没有执行; (其实不是没有执行,是执行了onpageshow)

上网搜索 ios 返回上一页并刷新页面的时候,会看到的解决方案有监听 onpageshow 事件, 通过查看文档可以知道 onpageshow 事件中,可以通过使用 PageTransitionEvent 对象的 persisted 属性来判断,页面是直接从服务器上载入还是从缓存中读取; 如果页面从浏览器的缓存中读取该属性返回 ture,否则返回 false。

在 ios 中如果要实现,返回上一页并刷新页面的话,可以在上一页的脚本文件中加入如下代码:

window.addEventListener('pageshow', function(event) {
 if(event.persisted) { // ios 有效, android 和 pc 每次都是 false
  sessionStorage.removeItem('refresh');
  location.reload();
 }
});

但是这种方式在 android 和 pc 的浏览器中没有效果,经过尝试会发现 android 和 pc 的浏览器中每一次进入 pageshow事件后,event.persisted 永远都是返回 false。

不管是在任何情况下,都会监听到 pageshow事件。既然能进入这个函数,那就得想办法在这个函数里判断是否需要刷新页面。可以通过缓存的方式 localStoragesessionStoragecookie

要在页面中判断是否需要刷新,那就得在从下一级返回过来的时候,往 cache中存入需要刷新。

sessionStorage.setItem('refresh', 'true');
history.go(-1);

然后在上一级也页面获取并判断

if(sessionStorage.getItem('refresh') === 'true') {
 sessionStorage.removeItem('refresh');
 location.reload();
}

综合兼容所有设备的返回上一页并刷新页面的方式为:

window.addEventListener('pageshow', function(event) {
 if(event.persisted) { // ios 有效, android 和 pc 每次都是 false
  location.reload();
 } else { // ios 除外
  if(sessionStorage.getItem('refresh') === 'true') {
   location.reload();
  }
 }
 sessionStorage.removeItem('refresh');
});

注意:

1. 在下一级页面返回的时候,要标记需要刷新页面(set)

2. 在判断完成后,一定要删除之前的存储(remove)避免出现无限重载的情况

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript页面元素操作技巧总结》、《JavaScript操作DOM技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript错误与调试技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

(0)

相关推荐

  • 返回上一页并自动刷新的JavaScript代码

    用JavaScript一般的使用history.go(-1)和history.back()等 但返回的是页面还是缓存中的数据,更新的数据不能马上呈现出来 这里只要使用一句简单的一条javascript语句就能实行,返回上一页并刷新页面 复制代码 代码如下: location.href = document.referrer;//重新载入上一页

  • js中document.referrer实现移动端返回上一页

    返回上一页,在PC端我们可以使用:history.go(-1)或者history.back(),可以正常返回第一层.这样,我们不需要上一页的 url 具体是什么,只要使用 history 一般都没啥问题. 但是在移动端,如果想要返回上一页.比如从A页面跳到B页面,如果B页面想返回A页面,为了防止不会跳错,必须要有一个 <  按钮,给它加 history.go(-1) ,返回上一层. <a href="javascript:history.go(-1)" rel="

  • JavaScript返回上一页的三种方法及区别介绍

    JavaScript返回上一页代码区别: window.history.go(-1); //返回上一页 window.history.back(); //返回上一页 //如果要强行刷新的话就是:window.history.back();location.reload(); window.location.go(-1); //刷新上一页

  • js返回上一页并刷新的多种实现方法

    <a href="javascript:history.go(-1)">返回上一页</a> <a href="javascript:location.reload()">刷新当前页面</a> <a href="javascript:" onclick="history.go(-2); ">返回前两页</a> <a href="javascr

  • Javascript实现返回上一页面并刷新的小例子

    今天写了一个小小的提示成功的页面,同时要求返回上一页面,并实现对上一页面的操作进行刷新(例如删除的,添加的),在网上搜寻了一遍,基本上90%的都是说的是用window.history.go(-1), 或者是用 window.history.back(-1), 还有的说子页面刷新父页面用 复制代码 代码如下: <script language=JavaScript> self.opener.location.reload(); </script> 经过在JSP页面的测试,在操作页面选

  • JS本地刷新返回上一页代码

    长话短说,今天介绍实现此功能的一个方法,需要了解的朋友可以参考下: 一.JS 重载页面,本地刷新,返回上一页 代码如下: <a href="javascript:history.go(-1)">返回上一页</a> <a href="javascript:location.reload()">重载页面,本地刷新</a> <a href="javascript:history.go(-1);location

  • wap手机端解决返回上一页的js实例

    如下所示: <input id="hd_referrer" type="hidden" /> <a href="javascript:void(0)" onclick="referurl(); ">返回 </a> <script> $(function () { $("#hd_referrer").val(document.referrer); }); fun

  • JS返回上一页实例代码通过图片和按钮分别实现

    1. <a href ="javascript:history.go(-1);">向上一页</a> 2. <a href="javascript :history.back(-1)">返回上一页</a> 3. 如果是用按钮做的话就是: 复制代码 代码如下: <input type="button" name="Submit" onclick="javascript

  • js返回上一页并刷新代码整理

    一:JS 重载页面,本地刷新,返回上一页 复制代码 代码如下: <a href="javascript:history.go(-1)">返回上一页</a> <a href="javascript:location.reload()">重载页面,本地刷新</a> <a href="javascript:history.go(-1);location.reload()">返回上一页重载页面,

  • js中的referrer返回上一页使用介绍

    js完整代码: 复制代码 代码如下: <script language="javascript"> var refer=document.referrer; document.getElementById('backurl').value=refer; </script> "HTTP_REFERER" 链接到当前页面的前一页面的 URL 地址.不是所有的用户代理(浏览器)都会设置这个变量,而且有的还可以手工修改 HTTP_REFERER.因此

随机推荐