jquery实现点击浏览器后退,上一页面自动刷新
一、需求
比如我们要从列表页进入到详情页,在详情页修改完数据之后,此时若是返回列表页,页面展示的内容也应该和详情页修改之后的内容保持一致才是。如果是location.href=''
跳转到列表页的,则可以实现正常刷新。但如果是点击浏览器的后退按钮呢?
大家都知道,浏览器有自己的缓存机制,我们的网页是被浏览器缓存了。如果想要后退刷新的按钮的话,建议是采用js的手段去控制。
二、寻找方案
1、网上百度
大家一百度就会发现,网上都是说的在html顶部加上不能缓存的meta
标签,或者使用input隐藏域
等,我在本地试了下没一个成功的。可能是我的使用方式不对吧。
2、采用cookie策略
既然以上方法都不行,那么能不能从cookie入手呢。根据我们的需求,我们又怎么才能在每次加载页面的时候,都根据cookie刷新页面呢?
首先是了解一下jquery的一个cookie插件:
jquery-cookie中文文档
了解完大致操作之后,我们可以设想下:
(1)如果我们每次进入页面都获取一个未知的cookie值,那么返回值是null。
(2)我们给页面的cookie赋值一个数字。
(3)然后我们下次进入页面就能获取这个cookie的值。
(4)此时我们可以重新给这个cookie赋值为null(方便每次进页面,cookie都为null,实现每次都能刷新页面)
(5)使用`location.reload()`方法刷新页面即可
3、代码部分
<script src=" https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script><script>//这里的test可以是任意的值,反正我们是获取不到这个值的。打印一下,发现获取不到的cookie为null$first=$.cookie('test'); 、if(!$first||$first=='null'||$first==null){
//第一次进页面,肯定是没有cookie的,所以这里设置cookie的值为1,时间为7天$.cookie('test','1',{ expires: 7 });}else{
//然后等下次回到页面,肯定会取到cookie的值,然后我们就反其道而行,给cookie赋值为null,同时刷新页面$.cookie('test',null);location.reload(true);}</script>
(1)如果觉得引入外部JS会影响速度,那么就存放在本地最好
(2)这段代码建议放在的最下面,这样页面体验好。如果放到head的话,页面会出现短暂的白屏刷新
然后我们试验这段代码,就会发现真的实现了我们的需求。每次点击浏览器后退按钮,我们的列表页都会刷新,而且刷新的体验会很好,页面加载完之后只需要改变dom的值即可。
参考链接:
https://blog.csdn.net/xiawu1990/article/details/52055466
end
jquery实现点击浏览器后退,上一页面自动刷新相关推荐
- 苹果下微信浏览器返回上一页不刷新问题解决方案
苹果下微信浏览器返回上一页不刷新问题解决方案 参考文章: (1)苹果下微信浏览器返回上一页不刷新问题解决方案 (2)https://www.cnblogs.com/liuxiaojie/p/78325 ...
- 《解决微信内置浏览器返回上一页强制刷新问题方法》
<解决微信内置浏览器返回上一页强制刷新问题方法> 参考文章: (1)<解决微信内置浏览器返回上一页强制刷新问题方法> (2)https://www.cnblogs.com/li ...
- css距离页面顶部有空白,在Safari浏览器手机上导致页面顶部出现空白的CSS问题
浏览我的网站的手机版本时,在我的每一页的顶部都有一个水平的白色条,高度约为15px.下面是相关的CSS代码和HTML标记:在Safari浏览器手机上导致页面顶部出现空白的CSS问题 body { ba ...
- 解决ios端返回上一个页面不刷新页面的问题
javascript返回上一个页面也许你会立马想到几种方案: 1.<a href="javascript:history.go(-1)">返回上一页</a> ...
- html页面选择附件实现,实现单文件上传,页面局部刷新_html/css_WEB-ITnose
实现单文件上传,页面不刷新 1.html fjFileInsert.action执行文件上传,然后返回数据到upLoad.html页面,upLoad.html页面在iframe中隐藏起来 当执行完毕, ...
- php微信浏览器自带后退功能禁用,jquery如何实现禁用浏览器后退
jquery实现禁用浏览器后退的方法:首先打开相应的js文件:然后通过"jQuery(document).ready(function () {...}"方法禁用浏览器的back和 ...
- html5 微信返回按钮,《解决微信内置浏览器返回上一页强制刷新问题方法》(示例代码)...
微信内置浏览器在返回上一页面,且上一页面包含AJAX代码时,页面就会被强制刷新,极度影响用户体验.而我们想要的效果是:返回上一页面时,页面还停留在原来的状态,AJAX获取到的数据还在,滚动条也在原来的 ...
- 微信android返回上一页位置,解决微信内置浏览器返回上一页强制刷新问题方法...
微信内置浏览器在返回上一页面,且上一页面包含AJAX代码时,页面就会被强制刷新,极度影响用户体验.而我们想要的效果是:返回上一页面时,页面还停留在原来的状态,AJAX获取到的数据还在,滚动条也在原来的 ...
- weixin公众号页面返回上一层_《解决微信内置浏览器返回上一页强制刷新问题方法》...
微信内置浏览器在返回上一页面,且上一页面包含AJAX代码时,页面就会被强制刷新,极度影响用户体验.而我们想要的效果是:返回上一页面时,页面还停留在原来的状态,AJAX获取到的数据还在,滚动条也在原来的 ...
最新文章
- 问题 | Spare BA 中的Eigen运行错误
- TypeScript 里的 module 概念
- 企业级IM应该帮助员工提高绩效,避免无关的信息干扰
- mysql普通标转分区表_MySQL分区表到普通表互转
- Hive在linux上的部署
- XGBoost原理与实例分析
- 报告:代币化资产市值已超200亿美元
- linux环境下protobuf的安装与使用
- Cookie与Session简介
- python with as有什么好处?
- iOS8 自定义navigationbar 以及 UIBarButtonItem 边距问题
- 葡萄城报表模板库更新:新增6个行业、50张经典报表模板
- 如何用ps做计算机二级报名照片,等级考试照片PS教程
- 联想电脑无法进入计算机,联想电脑进不去主界面怎么办
- 济南计算机技术学校,省技工院校计算机技术中心教研组会议在济南市技师学院召开...
- iPhone线控耳机如何使用教程
- 中国工商银行上海市分行-存量房交易服务平台
- win7 android双系统,Win7+Android双系统 Acer AOD255评测
- python特殊符号
- LeetCode 89 双周赛