关于history.back()、history.go()回退但无法刷新页面的问题

window.history.back();

这样确实可以做到后退的功能,但是项目中,常常并不只是后退就能完成需求,往往需要在后退的同时,刷新后退的页面信息,比如后退到首页同时刷新首页的最新数据,这样的需求通过上面这种方法就没法满足了,为了实现这个需求,我们需要使用到

document.referrer

这个方法可以取到上一个页面的具体路径,我们通过这个方法,再结合JS的跳转函数

window.location.href

就可以实现后退并且刷新的效果的,完整代码如下:

window.location.href = document.referrer;

时间: 2024-08-29 11:08:24

关于history.back()、history.go()回退但无法刷新页面的问题的相关文章

HTML5 History对象,Javascript修改地址栏而不刷新页面(二)

一.实例说明: $('#btnOne').click(function () { var stateObject = { id: 1 }; var title = "本地首页"; var newUrl = '/index.html'; //修改地址栏中的地址 /* * 使用说明,pushState中缓存的地址,必须是当前域中的地址 */ history.pushState(stateObject, title, newUrl); }); $('#btnTwo').click(funct

history.go history.back()

转http://www.mikebai.com/Article/2009-11/757.html <input type=button value=刷新 onclick="window.location.reload()"><input type=button value=前进 onclick="window.history.go(1)"><input type=button value=后退 onclick="window.

html5 history实现无刷新页面

注:要在服务器下运行 <body><a href="test1.html" class="history">点击我跳到test1.html页面</a><a href="index1.html" class="history">点击我跳到index1.html页面</a><a href="hello.html" class="hist

./node_modules/history/esm/history.js Module not found: Can&#39;t resolve &#39;@babel/runtime/helpers/esm/extends&#39;

从同事手中接手项目之后.npm install 然后npm start的时候.开始报上图的错误.解决方法一(比较 愚蠢)当时找到的解决方法都没有用.然后只能按照报错的路径,从同事那边复制了node_modules下面的文件(报错路径文件替换掉),ran然后在npm start的时候,项目可以正常运行.(下图为当时替换掉的文件) 解决方法二  替换roadhog的版本为   "roadhog": "^2.5.0-beta.4", 然后删掉node_modules文件夹

解决window.history.go(-1)执行后不刷新页面的问题

在iphone上出现了window.history.go(-1)执行后不刷新页面的问题,安卓不会有这个问题. 解决方法为在返回后的页面加上: window.addEventListener('pageshow', function(e) { //如果检测到页面是从“往返缓存”中读取的,刷新页面 if (e.persisted) { window.location.reload(); } }); 原文地址:https://www.cnblogs.com/luoyihao/p/12665868.ht

Ajax回退刷新页面问题的解决办法

在脚本之家看到一篇文章,觉得以后可能会用上,但是竟然不能收藏,所以只能将其转到博客园. 以下是原文地址: http://www.jb51.net/article/87856.htm 这篇文章主要介绍了Ajax回退刷新页面问题的解决办法的相关资料,非常不错,具有参考借鉴价值,感兴趣的朋友一起学习吧 Ajax 简介: AJAX即"Asynchronous Javascript And XML"(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术. AJAX = 异

记 history.replaceState方法一次应用 解决单页面应用刷新切换页面问题

恩,以前就知道history api 新加了几个方法但是没怎么研究过,今天碰到了一个小问题,用history完美解决了,很兴奋,记录下 首先说下我遇到的问题场景: 现在有两个页面 A,B A页面时提交信息页面 B页面是结果页 并且 A,B 页面是同一个html文件内用 js 模板 动态渲染的, 那么当结果页面动态渲染出来以后,每次刷新就会显示A页面,其实,我更想显示B页面对吧,肯定不想让用户再次提交一次,而且大多数情况下我其实并不希望用户直接进入提交信息页面的,因为如果是支付的话,会造成二次支付

采用AJAX + history api做无刷新页面的分页

大家都知道浏览器有一个history对象是用来保存浏览历史的,比如一个窗口访问了两个个页面,那么history.length属性等于2. history api在H5时代新增了两个方法,pushState和replaceState 从名字就可以知道一个是新增一条记录一个是改变当前那么记录. 用AJAX加history做分页的好处就是既提高了用户体验,支持前进后退,加快页面加载速度又对搜索引擎十分友好 首先我们来判断浏览器是否支持pushState/replaceState if(!!(windo

强制浏览器在点击回退按钮时重载刷新页面

最近在项目中有个场景会涉及到此问题,第一反应是通过header控制估计行不通,使用的浏览器为chrome,点击回退时浏览器并不重新请求服务器也不会重新渲染页面.所以服务器header或页面中的meta信息起不了作用.这样以来,就把解决方式定位在了前端来处理,用浏览器的本地存储设置了一个临时标志位,既页面1请求到页面2时,在页面2写入标志位,在页面1里做检查是否有标志位来进行重载刷新判断.思路很明了,因为项目支持的是H5环境,想通用所有浏览器的话,如使用cookie也可达到同样的目的.