解决使用window.history.back()，返回上一页后，页面不刷新问题

最新推荐文章于 2024-10-20 21:50:50 发布

原创最新推荐文章于 2024-10-20 21:50:50 发布 · 1.5w 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#返回上一页不刷新 #window.history.back() #刷新 #返回刷新

前端专栏收录该内容

17 篇文章

订阅专栏

本文介绍了一段用于浏览器页面的JS代码，该代码可以在页面回退显示时触发自动刷新功能。适用于那些需要确保用户看到最新页面状态的应用场景。

在返回的页面增加以下js代码

window.onpageshow = function(event) {
			if (event.persisted || window.performance &&
                window.performance.navigation.type == 2) {
				window.location.reload();
			}
		}

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

idongit

关注关注

5
点赞
踩
9

收藏

觉得还不错? 一键收藏
2
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

uniapp：解决history.back()返回上一页苹果ios不刷新页面、浏览器返回上级页面不刷新数据问题，或不重新加载ready解决办法（强制刷新，适用移动端H5、微信公众号网页微信内置浏览器）

高级前端工程师

09-17

4288

IOS微信内置浏览器history.back()；不刷新页面解决办法，uniApp页面history.back()返回上一页，ios 不重新加载ready的解决办法，iOS H5 history.back() 返回上一路由页面白屏，微信h5页面返回时ios不刷新页面解决方案，苹果手机，ios微信浏览器返回不刷新问题完美解决方法，ios系统history.back()返回却不刷新页面，微信浏览器点击返回上一页页面不刷新，解决微信内置浏览器返回上一页强制刷新问题方法，这个只能后退一步不能刷新怎么办，苹果下

网页通过页面回退按钮或者回退事件window.history.back()重新加载显示时，执行刷新页面的操作

qq_38649702的博客

06-10

1425

JS实现监听页面为通过回退方式进入时，刷新此页面

2 条评论您还未登录，请先登录后发表或查看评论

2 条评论

weixin_42616891 2020.11.15
谢谢博主解决了困扰我的问题！！！

Yunkaiwusan2301 2020.05.20
原来除了window.onload还有一个window.onpageshow 困扰了我三天三夜的问题，终于解决了，多谢前辈

从window.history理解浏览器返回不触发页面刷新问题

weixin_42349568的博客

02-28

5241

DOM window 对象通过 history 对象提供了对浏览器的会话历史的访问，它暴露了很多有用的方法和属性，允许你在用户浏览历史中向前和向后跳转，同时——从 HTML5 开始——提供了对 history 栈中内容的操作。

Windows.history.back() + location.reload() jquery

suiusoar

10-20

395

Windows.history.back() + location.reload() jquery

你所不知道的 window.history API 神操作

小白小白从不日别的博客

05-10

1084

利用 window.history 对象实现的一个小案例

window.history.back(); 缓存返回上级页面不刷新数据

cuandeqin2083的博客

03-18

1万+

问题我们经常会做完一个操作之后返回上一个页面（比如新增完一条记录）然后我们希望返回上一个页面的时候就自动刷新他。但是由于JS的缓存机制导致我们的数据还是从前一次里面取的（他的初衷是希望你更快，更省资源）但是和我们的需求不同如图：探索从网上找的一些资料：在window.history.back(); 后面加location.reload(); win...

js 返回上一页和刷新的代码

12-13

本文将详细介绍JavaScript中的各种方法来实现返回上一页、刷新页面以及相关的页面跳转技术。首先，我们来看如何实现“返回上一页”： 1. `history.go(-1)`：这个方法将浏览器的历史记录向后移动一步，相当于点击...

浏览器页面刷新，history增加，需要多次调用history.back()才能后退的解决方法

qq_34415621的博客

08-29

2979

浏览器页面刷新，history增加，需要多次调用history.back()才能后退的解决方法history.back()时需要调用好几次才能回退到上个页面。本来刷新应该不会增加history的记录，项目中某些页面就会出现这种情况，刷新一次就会增加一条。但是有些页面就没这种现象，具体原因也没有查到，希望懂的同学赐教。......

苹果手机，ios系统history.back()返回却不刷新页面

weixin_37365539的博客

06-08

1538

项目里点击提交按钮以后，需要返回上一页并且刷新页面，在安卓手机上可以，但是在苹果手机上只能返回上页但是不刷新。原文链接：https://blog.csdn.net/hbts_901111zb/article/details/76691900 在上一个页面里加一段js // 解决ios上返回上一页不刷新的问题 (function () { var isPageHide = false; window.addEventListener(‘pageshow’, function () { if (isPageH

window.history.back() IOS返回不刷新的问题

versionli的博客

11-06

2799

有时候我们有这样的需求，在A页面跳到B页面之后更改一些数据之后返回到A页面,A页面的某个状态要改变，得重新调用接口更改状态，这样就要刷新。但是如果从A页面跳到B页面，之后在B页面通过window.history.back()返回A页面，在安卓机是可以刷新的，但在IOS机是不行的，所以解决的办法只能用 window.location.href="./A.html", 这样就可以了...

history.go()和history.back()，history.go()不刷新

旺仔好吃糖的博客

07-18

1788

history.back()不管括号内传入什么参数，都只会返回上一次刷新的页面，而不能进行多次跳转。对于pageshow事件，如果页面是从bfcache（往返内存）中加载的，则这个属性的值为true；在重新加载的页面中，pageshow会在load事件触发后触发；back()加载history列表中前一个url，原页面表单内容保存，即后退。persisted是pageshow事件的event对象包含的布尔值属性。go()加载history列表中的某个具体页面，即后退或前进+刷新。...

html5返回上一页不刷新,javascript解决在safari浏览器中使用history.back()返回上一页后页面不会刷新的问题...

weixin_32392583的博客

06-03

2664

我们知道，在JavaScript中提供了一个window.history.back()方法用于返回上一页，另外也可以使用window.history.go(-1)返回上一页(跳转)。在其他的主流浏览器中(Chrome、Firefox等)，使用这两个方法都会重新执行返回页面的JS。这就意味着，当文档加载完成事件函数中有刷新页面的操作代码的情况下，上一个页面会刷新。但是在Safari浏览器中则情况有一...

JS window对象返回前一个浏览的页面 back()方法，加载 history 列表中的前一个 URL。语法： window.history.back();...

weixin_30216561的博客

06-16

736

返回前一个浏览的页面 back()方法，加载 history 列表中的前一个 URL。语法： window.history.back(); 比如，返回前一个浏览的页面，代码如下： window.history.back(); 注意：等同于点击浏览器的倒退按钮。 back()相当于go(-1),代码如下: window.h...

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

Hzz的博客

02-08

3801

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

js 页面history.back()返回上一页，ios 不重新加载ready的解决办法

最新发布

12-27

在 B 页面使用 `window.location.href` 跳转后，默认情况下浏览器的历史记录会更新，直接使用 `window.history.back()` 会返回到跳转前的上一个历史记录，而不是期望的特定页面。为了实现保留性地执行 `window.history.back()`，可以采用以下几种方案： #### 方案一：使用 HTML5 的 `history.pushState` 和 `history.replaceState` `history.pushState` 和 `history.replaceState` 方法可以在不刷新页面的情况下修改浏览器的历史记录。在 B 页面跳转前，使用这两个方法来记录需要返回的状态。 **B 页面代码示例**： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Page B</title> </head> <body> <button id="jumpButton">跳转到 C 页面并保留返回 B 页面的能力</button> <script> const jumpButton = document.getElementById('jumpButton'); jumpButton.addEventListener('click', function() { // 使用 pushState 记录当前页面状态 history.pushState({ page: 'B' }, 'Page B', 'b.html'); // 跳转到 C 页面 window.location.href = 'c.html'; }); </script> </body> </html> ``` 在 C 页面，可以直接使用 `window.history.back()` 返回到 B 页面。 #### 方案二：使用 URL 参数传递信息在 B 页面跳转时，通过 URL 参数传递一个标识，在目标页面根据这个标识来决定返回的页面。 **B 页面代码示例**： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Page B</title> </head> <body> <button id="jumpButton">跳转到 C 页面并保留返回 B 页面的能力</button> <script> const jumpButton = document.getElementById('jumpButton'); jumpButton.addEventListener('click', function() { // 跳转到 C 页面并传递参数 window.location.href = 'c.html?from=b'; }); </script> </body> </html> ``` **C 页面代码示例**： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Page C</title> </head> <body> <button id="backButton">返回 B 页面</button> <script> const backButton = document.getElementById('backButton'); backButton.addEventListener('click', function() { const urlParams = new URLSearchParams(window.location.search); if (urlParams.get('from') === 'b') { window.location.href = 'b.html'; } else { window.history.back(); } }); </script> </body> </html> ```