js实现关闭子窗口时刷新父窗口

当我们在子窗口中关闭窗口时,可以使用JavaScript来刷新父窗口。下面是一个详细的介绍:
1. 获取父窗口对象:
- 在子窗口中,可以使用`window.parent`属性获取父窗口的全局对象。
- 通过`window.parent`,我们可以访问父窗口的各种属性和方法。
2. 关闭子窗口:
- 在子窗口中,可以使用`window.close()`方法来关闭当前窗口。
- 当我们调用`window.close()`时,子窗口将被关闭并从浏览器中移除。
3. 在子窗口中发送消息给父窗口:
- 在关闭子窗口之前,我们可以向父窗口发送一个自定义消息,以通知父窗口刷新页面。
- 可以使用`window.postMessage()`方法发送消息给父窗口。
4. 在父窗口中监听消息事件:
- 在父窗口中,我们需要添加一个事件监听器来接收子窗口发送的消息。
- 可以使用`window.addEventListener()`方法来监听消息事件,并定义相应的回调函数。
5. 在父窗口中刷新页面:
- 在父窗口接收到子窗口发送的刷新消息后,我们可以在回调函数中执行页面刷新的操作。
- 可以使用`location.reload()`方法来刷新当前页面。
6. 设置跨域消息传递:
- 如果子窗口和父窗口的域不同,可能会涉及到跨域问题。
- 在这种情况下,我们需要在父窗口和子窗口之间设置合适的跨域消息传递机制,例如使用`window.postMessage()`方法的第二个参数指定接收消息的来源。
7. 兼容性考虑:
- 在处理窗口关闭和刷新事件时,要考虑不同浏览器的兼容性。
- 可以使用条件语句或浏览器特定的API来处理不同浏览器的差异。
总结:通过获取父窗口对象、关闭子窗口、发送消息给父窗口、监听消息事件、刷新父窗口页面等步骤,我们可以实现在关闭子窗口时刷新父窗口。同时,还需要考虑跨域传递消息和浏览器兼容性。
本文原文来自:薪火数据 js实现关闭子窗口时刷新父窗口 (datainside.com.cn)
js实现关闭子窗口时刷新父窗口的更多相关文章
- js window.open()实现打印,如何在关闭打印窗口时刷新父窗口
var childWin = window.open("your URL"); //获取子窗口句柄childWin.onunload = function(){ //onunloa ...
- js ShowDialogModal 关闭子页面并刷新父页面,保留查询条件
不知道大家有没有碰到类似的问题,当时的你是什么思路来处理这个问题呢?是url,session,cookie,还是…… 今天笔者就遇到了这个问题,当时的想法如:url,session,cookie都尝试 ...
- JS实现关闭当前子窗口,刷新父窗口
一.JS实现关闭当前子窗口,刷新父窗口 JS代码如下: <script> function refreshParent() { window.opener.location.href = ...
- JS实现关闭当前子窗口,刷新父窗口及调用父窗口的方法
一.js实现关闭当前子窗口,刷新父窗口 JS代码如下: <script> function refreshParent() { window.opener.location.href = ...
- 更新记录后关闭子窗口并刷新父窗口的Javascript
有时我们需要在新打开的窗口里面编辑信息,等编辑完了,需要将当前窗口关闭并且刷新父窗口,以使修改生效,本文就是介绍用 javascript 来实现"更新记录后关闭子窗口并刷新父窗口" ...
- 关闭open页面时刷新父页面列表
var winObjEI = window.open("/Invoice/InvoiceViewEI?invoiceid=" + data.InvoiceId); ; //关闭op ...
- layer.js关闭子窗口及刷新父窗口
在需要layer.js弹窗口时,当编辑完窗口内容,需要关闭及刷新父窗口时: $("#senddata").click(function(){var id = $('input[na ...
- iframe嵌入的子页面如何刷新父窗口
iframe中刷新父页面方法及一些按钮刷新代码集合[原创+转]2009-07-23 11:12a页面里iframe了个b页面,我想实现在b页面里一个按钮,一按就刷新a页面,也就是父页面,不是只刷新if ...
- js关闭子窗口,刷新父窗口
父页面js:function btnAdd_onclick() {window.open("xxx.jsp", "","height=600, wid ...
- web 打开子窗口提交数据或其他操作后 关闭子窗口且刷新父窗口实现
父页面 : html连接:<a href="javascript:void(0)" onclick="window.open(子页面URL)">js ...
随机推荐
- [oracle]用户与权限管理
创建用户 CREATE USER 用户名 IDENTIFIED BY 密码 DEFAULT TABLESPACE 表空间 TEMPORARY TABLESPACE 临时表空间 QUOTA 空间配额大小 ...
- AI绘画工具MJ新功能有点东西,小白也能轻松一键换装
先看最终做出来的效果 直接来干货吧.Midjourney,下面简称MJ 1.局部重绘功能来袭 就在前两天,MJ悄咪咪上线了这个被众人期待的新功能:局部重绘. 对于那些追求创新和个性化的设计师来说,局部 ...
- 浅谈基于QT的截图工具的设计与实现
本人一直在做属于自己的一款跨平台的截图软件(w4ngzhen/capi(github.com)),在软件编写的过程中有一些心得体会,所以有了本文.其实这篇文章酝酿了很久,现在这款软件有了雏形,也有空梳 ...
- 简单描述下HTTP协议和TCP协议之间的关系以及TCP三次握手, 四次挥手
TCP 三次握手, 四次挥手 TCP(传输控制协议)是一种用于在计算机网络中建立可靠连接的协议.TCP连接的建立和终止分别使用了"三次握手"和"四次挥手"的过程 ...
- C盘无法创建文件处理
icacls c:\ /setintegritylevel M 打开终端执行上方命令,亲测可用
- Solution -「YunoOI 2017」由乃的 OJ
Description Link. 起床困难综合症 上树. Solution 线段树维护,树剖上树. 具体题解有空再写,我要去睡觉了. #include<bits/stdc++.h> ty ...
- 【RocketMQ】事务实现原理总结
RocketMQ事务的使用场景 单体架构下的事务 在单体系统的开发过程中,假如某个场景下需要对数据库的多张表进行操作,为了保证数据的一致性,一般会使用事务,将所有的操作全部提交或者在出错的时候全部回滚 ...
- Azure Data Factory(九)基础知识回顾
一,引言 在本文中,我们将继续了解什么是 Azure Data Factory,Azure Data Factory 的工作原理,Azure Data Factory 数据工程中的数据管道,并了解继承 ...
- 使用 Sealos 构建低成本、高效能的私有云
这个时候谈论私有云似乎有点反直觉?大部分人认知不是上云是大趋势嘛?我也比较认可上云,不过私有云也是云,今天给大家带来一个新的选择 -- 用云,只需一个 Sealos 就够了. 看看我们怎么做到更低的成 ...
- SpringBoot项目优雅停机+Pid暴力停机
bootstrap.yaml配置项目的pid输出位置 spring: pid: file: F:/cloud-nacos/cloud_gateway/application.pid springboo ...