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

最新推荐文章于 2023-04-08 22:14:33 发布
最新推荐文章于 2023-04-08 22:14:33 发布
阅读量1.5w 收藏 9
点赞数 5
分类专栏： 前端 文章标签： 返回上一页不刷新 window.history.back() 刷新 返回刷新
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/idongit/article/details/80975983
版权

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

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

 

idongit
关注
  • 5
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
html5返回上一页不刷新,javascript解决在safari浏览器中使用history.back()返回上一页后页面不会刷新的问题...
weixin_32392583的博客
06-03 2363
我们知道，在JavaScript中提供了一个window.history.back()方法用于返回上一页，另外也可以使用window.history.go(-1)返回上一页(跳转)。在其他的主流浏览器中(Chrome、Firefox等)，使用这两个方法都会重新执行返回页面的JS。这就意味着，当文档加载完成事件函数中有刷新页面的操作代码的情况下，上一个页面会刷新。但是在Safari浏览器中则情况有一...
window.history.back(); 缓存 返回上级页面不刷新数据
cuandeqin2083的博客
03-18 1万+
问题 我们经常会做完一个操作之后返回上一个页面（比如新增完一条记录） 然后我们希望返回上一个页面的时候就自动刷新他。 但是由于JS的缓存机制 导致我们的数据还是从前一次里面取的（他的初衷是希望你更快，更省资源） 但是和我们的需求不同 如图： 探索 从网上找的一些资料： 在window.history.back(); 后面加location.reload(); win...
从window.history理解浏览器返回不触发页面刷新问题
weixin_42349568的博客
02-28 3973
DOM window 对象通过 history 对象提供了对浏览器的会话历史的访问，它暴露了很多有用的方法和属性，允许你在用户浏览历史中向前和向后跳转，同时——从 HTML5 开始——提供了对 history 栈中内容的操作。
history对象，当前url添加参数且不刷新页面
m0_64562972的博客
04-08 2161
history对象，当前url添加参数且不刷新页面
实现history.back()返回后刷新历史页面
Hzz的博客
02-08 2882
实现history.back()返回后刷新历史页面
history.back(-1)和history.go(-1)返回上一个页面 刷新回退页
jievachange
05-31 9540
history.back(-1):直接返回当前页的上一页，不会刷新 history.go(-1):也是返回当前页的上一页，不会刷新 //返回上一个页面后进行刷新 window.location.replace(document.referrer) window.location.href=“上一个页面URL” ...
JS实现返回上一页并刷新页面的方法分析
10-16
在本文中，我们将深入探讨如何使用JavaScript实现返回上一页并刷新页面的功能，这是在开发过程中经常遇到的需求，特别是在移动设备和桌面浏览器之间存在差异的情况下。 首先，我们注意到在通常情况下，调用`history...
js返回上一页并刷新的多种实现方法
10-26
在网页开发中，有时我们需要实现用户点击按钮或者链接后，不仅返回上一页，还要同时刷新页面以获取最新的数据。本文将详细介绍JavaScript中实现这一功能的多种方法。 首先，最基础的两种方式是通过`history`对象的`...
js 返回上一页和刷新 的代码
09-28
2. history.back()：返回上一页，效果同上。 3. window.history.forward()：返回下一页，相当于浏览器的前进按钮。 4. window.history.go(n)：返回指定的页面，n为要返回的页面编号。 例如：<a href="javascript:...
返回上一页面并刷新
11-03
在管理系统开发中，经常遇到列表页面－跳转到某一记录的业务操作详细页面，操作完成之后需要回返列表页面需要刷新，使用window.history.back(); window.history.go(-1); 只能是回返目的，而未能刷新；使用self....
history.go()和history.back()，history.go()不刷新
旺仔好吃糖的博客
07-18 1385
history.back()不管括号内传入什么参数，都只会返回上一次刷新的页面，而不能进行多次跳转。对于pageshow事件，如果页面是从bfcache（往返内存）中加载的，则这个属性的值为true；在重新加载的页面中，pageshow会在load事件触发后触发；back()加载history列表中前一个url，原页面表单内容保存，即后退。persisted是pageshow事件的event对象包含的布尔值属性。go()加载history列表中的某个具体页面，即后退或前进+刷新。...
浏览器后退不执行ajax,解决ajax无法后退问题实例
weixin_32481609的博客
08-05 358
都知道ajax有一个明显的缺点就是与浏览器的history.back()与forward()不友好，不能前进与后退。解决方法：window.history实例在console里面打印出window.history的实例，可以查看相关对象的原型。length:length为浏览记录队列长度，由于这个页面是新打开的，队列中只有当前页面链接相关信息，其值为1state:pushState:就是windo...
AJAX工作原理及其优缺点
weixin_33979203的博客
06-15 902
1.什么是AJAX?AJAX全称为“Asynchronous JavaScript and XML”（异步JavaScript和XML），是一种创建交互式网页应用的网页开发技术。它使用：使用XHTML+CSS来标准化呈现；使用XML和XSLT进行数据交换及相关操作；使用XMLHttpRequest对象与Web服务器进行异步数据通信； 使用Javascript操作Document Object Mo...
解决ios端返回上一个页面不刷新页面的问题
热门推荐
web那些事
05-05 1万+
javascript返回上一个页面也许你会立马想到几种方案： 1.<a href="javascript:history.go(-1)">返回上一页</a> 2.<a href="javascript" onclick="history.back(); ">返回上一页</a> 3.<a href="javascript:" onclic...
解决ios  history.back()返回不刷新
Something的博客
05-27 2381
需求 当由A页面跳转到B页面，将B页面的字段保存至localstorage中。返回A页面时，需要将B页面的某些字段从localstorage取出进行渲染。 B页面返回A页面时，我用的是history.back()，由于ios和安卓机制不同，安卓会重新刷新主页面的ready， ios则不会。 解决方法 ①window.location.href=“pageA.html” 这是我们最容易想到的解决办法，但是存在问题。 pageA.html-->pageB.html-->pageC.h..
window.history.back()无效,即无法返回上一页原因
02-05 1万+
比如你从第一个页面点击一个a超链接.进到第二个页面,第二个页面有个返回按钮.点击无反应.如下 &amp;lt;a href=&quot;#&quot; onClick=&quot;javascript:window.history.back();return false;&quot;&amp;gt;点击这里无法返回&amp;lt;/a&amp;gt; 原因是你的第一个页面的超链接上加了target=&quot;_blank&
移动端路由history.back()不生效（路由返回）
东东东东东辉
09-17 3303
移动端路由history.back()不生效（路由返回） 在pc端的话，使用history.back()是可以的，但是在移动端是不生效的，想要在移动端返回上一层页面，先试用document.referrer获取上一层页面路径，再使用window.location.href进行跳转就可以了。 ...
react hooks 返回上一页不刷新上一页的页面
最新发布
05-29
在 React Hooks 中返回上一页并不会刷新上一页的页面，这是 react-router-dom 库的默认行为。如果你需要在返回上一页时刷新上一页的页面，可以通过以下几种方式实现： 1. 在返回上一页时手动刷新页面。可以使用 JavaScript 提供的 `location.reload()` 方法来刷新页面。具体来说，可以在需要返回上一页的事件处理函数中先调用 `history.goBack()` 方法，然后再调用 `location.reload()` 方法来刷新页面。 ```jsx import { useHistory } from 'react-router-dom'; function MyComponent() { const history = useHistory(); function handleGoBack() { history.goBack(); window.location.reload(); } return ( <div> <button onClick={handleGoBack}>返回上一页</button> </div> ); } ``` 2. 使用路由参数来判断是否需要刷新页面。可以在路由跳转时传递一个参数，然后在上一页的组件中监听该参数的变化，如果参数发生了变化，则手动刷新页面。具体来说，可以在需要返回上一页的组件中通过 `history.push()` 方法传递一个参数，然后在上一页的组件中通过 `useEffect()` 钩子函数监听该参数的变化，如果参数发生了变化，则调用 `location.reload()` 方法来刷新页面。 ```jsx import { useEffect } from 'react'; import { useHistory } from 'react-router-dom'; function PreviousComponent() { useEffect(() => { if (location.state && location.state.forceRefresh) { window.location.reload(); } }, []); return ( <div> <h1>上一页</h1> </div> ); } function MyComponent() { const history = useHistory(); function handleGoBack() { history.push({ pathname: '/previous-page', state: { forceRefresh: true } }); } return ( <div> <button onClick={handleGoBack}>返回上一页</button> </div> ); } ``` 需要注意的是，手动刷新页面可能会导致用户的操作数据丢失，因此需要谨慎使用。建议在需要刷新页面时给出提示并允许用户确认。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值