jquery返回上一页并刷新,html返回上一页并刷新

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

本文主要介绍了JS返回上一页和刷新页面的方法,并结合实例分析了javascript对于移动和PC浏览器的相关操作技巧。有需要的可以参考一下。

本文描述了返回上一页并刷新页面的JS实现。分享给你,供你参考,如下:

一般情况下,当我们通过history.back()或history.go(-1)返回上一页时,页面不会被刷新。此非刷新页面包含两种情况:

在android或pc浏览器中看到的页面有刷新的效果,但事实并非如此。此时所有资源都是从缓存中加载的。我们可以通过浏览器调试工具从磁盘缓存或者从内存缓存中看到。

甚至在ios中返回上一页后,连上一页的脚本文件都不执行;(其实不是没执行,是onpageshow执行了)

在互联网搜索ios返回上一页并刷新页面时,你会看到的解决方案是监控onpageshow 事件。从文档中可以知道,在onpageshow 事件中,可以利用PageTransitionEvent 对象的persisted属性判断页面是直接从服务器加载还是从缓存读取。如果页面从浏览器的缓存中读取该属性,则返回true否则,它返回false。

在ios中,如果想返回上一页并刷新页面,可以将以下代码添加到上一页的脚本文件中:

window . addevent listener(' page show ',function(event) {

如果(event.persistent) {//iOS有效,android和pc每次都是假的。

session storage . remove item(' refresh ');

location . reload();

}

});

但是这种方法在android和pc的浏览器中没有效果。尝试后会发现,在android和pc的浏览器中输入pageshow事件后,event.persisted总是返回false。

在任何情况下,页面显示事件都将被监控。既然能进入这个函数,那就得想办法确定在这个函数中是否需要刷新页面。您可以缓存本地存储或会话存储或cookie。

如果要在页面中判断是否需要刷新,那么从下一级返回的时候就得存储在缓存中。

session storage . setitem(' refresh ',' true ');

history . go(-1);

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

if(session storage . getitem(' refresh ')===' true '){

session storage . remove item(' refresh ');

location . reload();

}

整合所有设备返回上一页并刷新页面的方法是:

window . addevent listener(' page show ',function(event) {

如果(event.persistent) {//iOS有效,android和pc每次都是假的。

location . reload();

} Else {//iOS除外

if(session storage . getitem(' refresh ')===' true '){

location . reload();

}

}

session storage . remove item(' refresh ');

});

注意:

1.当下一级页面返回时,标记要刷新的页面(设置)

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

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

希望这篇文章对大家的JavaScript编程有所帮助。

郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。

相关文章阅读

  • 使用jquery实现图片轮播效果如何,jQuery图片轮播
  • 使用jquery实现图片轮播效果如何,jQuery图片轮播,使用jQuery实现图片轮播效果
  • 举例说明jquery中each函数的使用,jquery each()
  • 举例说明jquery中each函数的使用,jquery each(),JQuery中each()的使用方法说明
  • 一篇文章带你了解jquery动画人物,一篇文章带你了解jquery动画制作
  • 一篇文章带你了解jquery动画人物,jquery的动画,一篇文章带你了解jQuery动画
  • trigger的用法总结,jquery trigger 传参数
  • trigger的用法总结,jquery trigger 传参数,jQuery中值得注意的trigger方法浅析
  • js hover 触发事件显示另一元素,js hover 触发事件,jQuery中多个元素的Hover事件解决方案
  • js apply 实现原理,jquery apply用法_1
  • js apply 实现原理,jquery apply用法
  • js apply 实现原理,jquery apply用法,js中apply方法的使用详细解析
  • js apply 实现原理,jquery apply用法,JS中apply()的应用实例分析
  • jq获取radio选中的值,jquery radio 取值
  • jq获取radio选中的值,jquery radio 取值,Jquery获取radio选中值实例总结
  • 留言与评论(共有 条评论)
       
    验证码: