关闭一个页面，同时刷新前一个页面

最新推荐文章于 2024-07-24 16:25:32 发布
原创 最新推荐文章于 2024-07-24 16:25:32 发布 · 4.7k 阅读 · 4 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#js

本文介绍了一种在浏览器窗口间进行交互的方法，特别是在窗口2处理完事件后如何关闭自身并触发窗口1的自动刷新。通过使用`window.opener.location.reload();self.close();`语句实现这一目标。

需求：根据窗口1打开了窗口2，然后当窗口2处理完事件之后，需要关闭窗口2并自动刷新窗口1。

实现语句：

window.opener.location.reload();
self.close();


ok完事！

uni-app -移动端H5小程序 关闭当前页，返回上一页并调用上一页的方法
专注于图像领域，主要研究内容包括计算机视觉和深度学习，特别是在图像分类、目标检测和图像生成等方面有深入的研究和实践经验。
10-07 4424
在uni-app中，方法用于获取当前页面栈的实例数组。页面栈是指打开的页面的层级关系，当前页面在数组中的索引为，上一页在数组中的索引为，以此类推。方法返回的是一个页面栈数组，数组中的每个元素都是一个页面实例，包含了页面的数据和方法。通过获取页面栈数组，我们可以根据索引获取到上一页的实例，然后可以调用上一页的方法或访问上一页的数据。
Vue监听页面刷新和关闭功能
10-16
`window.onbeforeunload`事件会在页面即将被卸载前触发，无论是因为用户关闭窗口、刷新页面还是导航到另一个页面。在该事件的处理函数中，可以执行需要的操作，如将购物车数据提交到服务器。如果函数返回一个字符串...
javascript 控制窗口关闭并刷新另一页面
在实验室——宅出一片未来
07-02 847
在a.jsp页面有一组数据b.jsp是对a.jsp的处理页面。具体的逻辑操作在b.jsp中实现。实现方式是从a.jsp中传递所需要删除的数据的ID，在b.jsp中先获取相应对象的信息，并尝试删除删除成功给出提示：1.提示删除成功。2.关闭窗口。3刷新a.jsp页面。其中javascript实现方式如下： window.alert("删除成功")
【若依】关闭当前标签页，返回上级页面并刷新
alikami的博客
04-23 3203
记录下若依项目中，需要返回上级页面并刷新。
从页面1新打开页面2，页面2关闭同时跳回页面1并刷新
qq_31699161的博客
11-11 419
页面2中操作： window.self.close(); window.opener.location.reload();
关闭页面和刷新操作
m0_59246072的博客
07-24 498
（1）引用事件beforeunload（刷新和关闭页面之前）、unload（刷新和关闭页面之后）（4）unload事件中要fetch处理（异步）（在该函数中不能进行跳跃）（3）beforeunload事件中记录时间和加入弹框进行判断。（2）在onMounted、onUnmounted进行。
JS区分浏览器页面是刷新还是关闭
10-22
产品经理可能会提出更细致的需求，例如在页面关闭时和页面刷新时提供不同的提示信息，或者在页面刷新时需要有延时操作，比如在客服系统中，为了避免电话系统频繁签入签出导致的问题，可能会设置一个延时再让用户重新...
layui 关闭open弹出框 刷新table表格页面的方法
10-16
最后，需要注意的是，页面刷新虽然是一个简单的方法，但是它可能会导致一些问题，比如丢失用户未提交的数据、增加服务器负载等。因此，如果是只需要更新表格数据而不是整个页面，应该考虑更加细致的数据更新策略，...
Vue页面刷新记住页面状态的实现
10-15
在Vue开发中，有时我们需要实现页面刷新后仍然能记住用户在页面上的操作状态，比如搜索条件、筛选选项等。这通常涉及到页面状态的持久化。本文将详细介绍如何在Vue项目中实现这一功能。 首先，Vue提供了`...
JS关闭子窗口并且刷新上一个窗口的实现示例
10-15
在JavaScript中，有时我们需要在用户完成特定操作（如选择模板）后关闭一个子窗口，并同时刷新父窗口以显示最新的数据。本文将详细介绍如何实现这一功能，以及解决在实现过程中可能遇到的问题。 首先，我们来看一个...
弹出层关闭父页面刷新
06-04
弹出一个窗口关闭后刷新父页面，自己试过可以，不知道是不是你们要的效果
JS 关闭本页面，刷新父页面
My Blog's
08-05 6294
//刷新父页面，关闭本页面                this.Page.Response.Write("script>alert(法律专家信息更新成功！);"+                    "window.opener.parent.document.location.reload();"+                    "window.opener
js关闭新页面的同时刷新原来的页面
qq_44741774的博客
12-02 1379
window.onbeforeunload = function() { //这里刷新方法有很多，具体要看你的子窗口是怎样出来的 window.opener.location.reload(); //parent.location.reload(); //self.opener.location.reload(); //window.opener.location.href=window.open...
关闭页面刷新上层页面的几种方式
任玉
05-30 3953
parent.location.reload();//使打开窗口的父窗口刷新，然后本子窗口关闭 window.location.reload();//刷新当前页面 parent.location.reload();//刷新父对象（用在框架） opene.location.reload();//刷新父窗口对象（用于单开的窗口） history.go(-1);//返回上一页，后退+刷新 h...
js打开一个新的浏览器窗口并监听窗口关闭然后刷新
weixin_44751195的博客
07-11 3527
实现思路： 使用Window open() 打开并创建一个窗口对象，使用定时器监听窗口关闭，当窗口关闭后刷新当前页面并停止监听器 实现代码 //打开窗口 var winObj = window.open('http://www.google.com','google','width=800,height=600,status=0,toolbar=0'); //循环监听 var loop = setInterval(function() { if(winObj.closed) {
js关闭当前窗口刷新父页面
祁梦@
04-29 3497
// 关闭当前窗口并刷新父页面 window.close(); window.opener.location.href = window.opener.location.href; // 返回上一页并刷新 window.history.go(-1); window.location.reload();
js关闭当前窗口刷新父窗口
weixin_48568302的博客
02-11 806
方法一： window.onbeforeunload = function() { //这里刷新方法有很多，具体要看你的子窗口是怎样出来的 window.opener.location.reload(); }; window.close(); 方法二： window.close(); window.opener.location.href = window.opener.location.href; ...
jsp 关闭子窗体刷新父页面
08-12 5179
1、第一步：在java后台类中设置，关闭弹出框后需要请求的菜单id String queryString = this.getRequest().getQueryString(); if(null!=queryString){ String mmid = queryString.split("=")[1]; this.getRequest().getSession()
jsp 返回并刷新上一页
zhongmei121的专栏
04-08 612
返回并刷新页面
vue 页面关闭通讯刷新另一个页面
最新发布
05-27
### Vue 中关闭当前页面并刷新其他页面的实现方法 在 Vue 应用中，要实现关闭当前页面的同时刷新另一个页面的功能，可以通过多种方式来完成。以下是几种常见的解决方案及其适用场景。 #### 方法一：利用 `window.opener` 实现跨窗口通信 当从一个页面 A 打开一个新的页面 B 时，可以在页面 B 使用 `window.opener` 来访问页面 A 的 `window` 对象，并调用其上的方法或直接操作 DOM[^1]。具体实现如下： ```javascript // 页面B中的逻辑 function closeAndRefreshParent() { if (window.opener && !window.opener.closed) { // 调用父页面的方法或者强制刷新父页面 window.opener.location.reload(); // 刷新父页面 } window.close(); // 关闭当前页面 } ``` 此方法适用于父子页面之间的交互，其中子页面可以主动通知父页面进行某些操作。 --- #### 方法二：通过事件监听机制（`visibilitychange`） 如果希望由旧页面自行监控状态变化，则可在旧页面绑定 `visibilitychange` 事件，在检测到焦点返回至该页面时自动触发数据更新逻辑[^1]。例如： ```javascript // 页面A中的逻辑 document.addEventListener('visibilitychange', function () { if (!document.hidden) { console.log("Page is now visible"); refreshData(); // 自定义的数据刷新函数 } }); function refreshData() { // 发起 API 请求或其他业务处理 fetch('/api/data') .then(response => response.json()) .then(data => { console.log("Updated data:", data); }); } ``` 这种方法无需依赖新开页面的操作行为，而是完全基于原生浏览器特性实现自动化管理。 --- #### 方法三：结合路由守卫与全局事件总线 对于单页应用(SPA)，推荐采用更优雅的方式——即借助 Vue Router 提供的能力以及自定义事件广播系统[^2]。比如设置导航离开前确认对话框(`beforeRouteLeave`) 或者捕获全局范围内的特定信号源(如 WebSocket 消息推送)。 另外还可以考虑引入 Vuex 存储共享状态信息以便多个组件间同步最新改动情况。 --- #### 方法四：使用 `onbeforeunload` 和 `unload` 处理退出动作 为了区分用户究竟是打算刷新还是彻底结束浏览进程，我们能够分别附加处理器给这两个阶段性的生命周期钩子函数[^3]: ```javascript export default { mounted() { window.onbeforeunload = () => {}; window.unload = () => { notifyOtherTabToRefresh(); }; }, destroyed() { window.onbeforeunload = null; window.unload = null; } }; function notifyOtherTabToRefresh() { localStorage.setItem('refreshSignal', Date.now()); } setInterval(() => { const signalTime = parseInt(localStorage.getItem('refreshSignal'), 10); if (signalTime && new Date().getTime() - signalTime < 1000 * 60 /* timeout */) { location.reload(); localStorage.removeItem('refreshSignal'); } }, 1000); // Check every second ``` 这里运用到了本地存储作为中介传递消息的作用原理。 --- ### 总结 以上列举了几种不同的技术手段用于达成目标效果，开发者应根据实际应用场景灵活选用最合适的方案组合起来满足复杂需求下的功能扩展可能性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值