实现history.back()返回后刷新历史页面

最新推荐文章于 2024-02-20 10:53:03 发布
最新推荐文章于 2024-02-20 10:53:03 发布
阅读量3.5k 收藏 3
点赞数 3
分类专栏： 前端 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_43948440/article/details/128932605
版权
当使用history.back()在浏览器中返回上一页时，如果上一页有提交操作和弹框，弹框会重现。为避免这种情况，可以使用window.location.replace(document.referrer)来返回上一页并刷新，从而消除之前的弹框状态。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

history.back()是在浏览器缓存中读取数据，后退到上一页保持原状态。但是如果上一页刚提交了什么东西，有弹框提示的话，那么在返回的时候，弹框会再次显示。

js方法解决:
可以将window.history.back()替换为

window.location.replace(document.referrer)

在大多数情况下，可以理解为返回上一页并刷新。

[极致用户体验] 网页里的「返回」应该用 history.back 还是 push ？
Hull Qin
08-17 5752
只要网页里有「返回」都会遇到这个问题。其实，你用back或push实现，都有问题。本文提供了完美解决方案，实现了逻辑正确的「返回」按钮，而且没有剥夺用户使用「原生返回」的权利。
由返回上一页并刷新页面想到的
03-29
返回上一页并刷新返回上一页，我们经常用... 但是有时候有这样的需求，我们在一个公共页面中进行了数据操作，操作完成之后用history.back()返回上一页，我们希望上一页的数据是改变的，但是由于是历史返回，上一页的
Javascript:history.go()和history.back()的用法与区别
热门推荐
water_v的博客
11-07 5万+
Javascript：history.go()和history.back()的用法与区别 简单的说就是：go(-1):返回上一页，原页面表单中的内容会丢失；back():返回上一页，原页表表单中的内容会保留。 history.go(-1):后退+刷新 history.back():后退 之所以注意到这个区别，是因为不同的浏览器后退行为也是有区别的，而区别就跟javascri
返回上一页面并刷新
11-03
在管理系统开发中，经常遇到列表页面－跳转到某一记录的业务操作详细页面，操作完成之后需要回返列表页面需要刷新，使用window.history.back(); window.history.go(-1); 只能是回返目的，而未能刷新；使用self.location=document.referrer，如果原页面是post提交的多条件查询，也就显然无效。 写一个js基本解决这个问题了，欢迎大家指正。有需要同学也可以参考一下。
History.back()页面后退刷新页面（HTML5）
weixin_43844696的博客
06-03 2132
在开发中经常会遇到在一个页面操作完返回上一个页面，此时要求上个页面展示最新数据的需求。 比如A1为上一个页面，A2为当前页面 （1）、在A1页面中需要加监听历史记录点 window.onpopstate=function(){ // 获得存储在该历史记录点的json对象 var json=window.history.state;// 获得的json为null时则无需刷新 if(json){ window.location.reload(); ...
返回上一页 刷新
Guanerye0314的博客
02-20 586
/如果要强行刷新的话就是：window.history.back();//刷新当前页 window.location.reload();history.go(-1), 返回两个页面: history.go(-2);window.history.go(返回第几页,也可以使用访问过的URL)window.history.go(-1);window.history.forward()返回下一页。
关于history.back()后,页面刷新的问题
tianting_wx的专栏
05-05 3275
比如对一个表单中的记录进行删除操作,提交后写一句Response.Write "alert(删除成功!);history.back()"然后返回发现原来的记录还在页面中显示,只是数据库中已经被删掉了.解决办法:只需要在后面加上location.reload()Response.Write "alert(删除成功!);history.back();location.reload();"
用history.back()跳转并刷新jsp页面
zangpuu的专栏
03-20 1691
<br />方法1<br />在JSP页面的前面加上： <br /><br /><% <br />response.setHeader("Cache-Control","no-store"); <br />response.setHeader("Pragrma","no-cache"); <br />response.setDateHeader("Expires",0); <br />%> <br /> <br />方法2<br />在history.back();后写上location.reload();
[removed]history.go()和History.back()的区别及应用
10-27
另一方面，`history.back()`方法是`history.go(-1)`的一个简写，它将浏览器窗口后退到历史记录的上一个页面。此方法无需参数，因为它的功能单一而明确。 在实际应用中，`history.go()`和`history.back()`可以用于...
javascript-history.go()和History.back()的区别.doc
最新发布
12-08
除了使用`history.go(0)`和`history.back()`实现页面刷新外，还可以使用`location.reload()`、`location=location`、`location.assign(location)`、`document.execCommand('Refresh')`、`window.navigate(location)`...
javascript-history.go()和History.back()的区分_.docx
10-09
1. **参数灵活性**：`history.go()` 可以通过传入不同的参数值来控制前进或后退的页面数量，而 `history.back()` 只能返回到上一个页面。 2. **代码简洁性**：在只需要返回上一个页面的情况下，`history.back()` 的...
history.back()前进 forward()返回 location.reload()刷新
m0_49249339的博客
03-18 306
通过事件实现 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <button onclick="dian">点我一下</button> <a href="3.1...
让页面不缓存，自动刷新
LYFlied的博客
03-18 3282
不让页面从缓存中取的数据， 浏览器后退后，实现自动刷新，不去取缓存
history.back(-1)和history.go(-1)返回上一个页面 刷新回退页
jievachange
05-31 9720
history.back(-1):直接返回当前页的上一页，不会刷新 history.go(-1):也是返回当前页的上一页，不会刷新 //返回上一个页面后进行刷新 window.location.replace(document.referrer) window.location.href=“上一个页面URL” ...
window.history.back()、window.history.go()返回上一页强制刷新
月下lk山人的博客
12-17 3607
通过history方法返回上一页时，返回的页面并不会刷新，这就造成了上一页的数据未及时更新，所以有时需要做刷新处理，如下 # 如果检测到页面是从“往返缓存”中读取的，刷新页面 window.addEventListener('pageshow', function(e) { if (e.persisted) { window.location.reload() } }) ...
浏览器页面刷新，history增加，需要多次调用history.back()才能后退的解决方法
qq_34415621的博客
08-29 2797
浏览器页面刷新，history增加，需要多次调用history.back()才能后退的解决方法history.back()时需要调用好几次才能回退到上个页面。本来刷新应该不会增加history的记录，项目中某些页面就会出现这种情况，刷新一次就会增加一条。但是有些页面就没这种现象，具体原因也没有查到，希望懂的同学赐教。......
从window.history理解浏览器返回不触发页面刷新问题
weixin_42349568的博客
02-28 4813
DOM window 对象通过 history 对象提供了对浏览器的会话历史的访问，它暴露了很多有用的方法和属性，允许你在用户浏览历史中向前和向后跳转，同时——从 HTML5 开始——提供了对 history 栈中内容的操作。
history.go()和history.back()，history.go()不刷新
旺仔好吃糖的博客
07-18 1682
history.back()不管括号内传入什么参数，都只会返回上一次刷新的页面，而不能进行多次跳转。对于pageshow事件，如果页面是从bfcache（往返内存）中加载的，则这个属性的值为true；在重新加载的页面中，pageshow会在load事件触发后触发；back()加载history列表中前一个url，原页面表单内容保存，即后退。persisted是pageshow事件的event对象包含的布尔值属性。go()加载history列表中的某个具体页面，即后退或前进+刷新。...
window.history.go(-1)返回且刷新页面
wxs828的博客
10-18 2356
windows窗口对象（历史）history.go(),history.back(),history.forward()。      因为windows对象引用不是必须的。所以windows.history.go() == history.go()的。      go()方法只有一个参数，可以是整数、负数。如果是正数，就前进。负数就是后退。（相当于Forward和Back的区别）   ...
如何实现跳转后返回后的页面不刷新？
11-17
为了实现在前端跳转后返回时不刷新页面，通常使用无刷新（Asynchronous or AJAX）技术，其中JavaScript的`window.history.pushState`方法以及`popstate`事件处理是关键。以下是基本步骤： 1. **使用pushState方法**： 在点击按钮或者导航链接时，而不是直接通过`location.href`更改URL，使用`history.pushState`来更新历史记录，同时保持页面内容不变： ```javascript function navigateToNextPage(data) { history.pushState(null, '', '/new-page-url?data=' + encodeURIComponent(JSON.stringify(data))); } ``` 这样，浏览器地址栏显示会变，但实际页面不会重新加载。 2. **监听popstate事件**： 为了让用户离开当前页或按Back键时能回到上一页，需要监听`popstate`事件，在回调中更新页面内容： ```javascript window.addEventListener('popstate', function(event) { if (event.state && event.state.data) { // 解码数据，根据实际情况更新页面内容 var data = JSON.parse(decodeURIComponent(event.state.data)); updatePageContent(data); } else { // 用户可能是直接进入当前页，或从其他非AJAX跳转而来 defaultPageBehavior(); } }); ``` 3. **后退到前一页**： 如果你希望在用户点击浏览器的前进按钮时也能回退，可以在`navigateToNextPage`函数中保存状态： ```javascript function navigateToNextPage(data) { saveCurrentState(); // 保存当前页面的状态以便回去 history.pushState(...); } function saveCurrentState() { localStorage.setItem('currentState', JSON.stringify(currentData)); } ``` 然后在`popstate`事件处理中检查是否有保存的数据来恢复： ```javascript function restorePreviousState() { var savedData = localStorage.getItem('currentState'); if (savedData) { var data = JSON.parse(savedData); // 更新页面内容 } } // 页面加载完成后，检查是否有缓存的回退数据 window.addEventListener('load', restorePreviousState); ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值