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 ...
随机推荐
- [nginx]lua控制响应头
前言 适用场景:添加CDN缓存时间.操作set-cookie.标记业务数据类型等. 获取响应头 指令:ngx.resp.get_headers 语法:headers = ngx.resp.get_he ...
- [nginx]定制http头信息
前言 修改http响应头信息,相关Nginx模块:ngx_http_headers_module expires 语法: expires [modified] time; expires [modif ...
- 产品代码都给你看了,可别再说不会DDD(一):DDD入门
这是一个讲解DDD落地的文章系列,作者是<实现领域驱动设计>的译者滕云.本文章系列以一个真实的并已成功上线的软件项目--码如云(https://www.mryqr.com)为例,系统性地讲 ...
- 一张图读懂TuGraph Analytics开源技术架构
TuGraph Analytics(内部项目名GeaFlow)是蚂蚁集团开源的分布式实时图计算引擎,即流式图计算.通过SQL+GQL融合分析语言对表模型和图模型进行统一处理,实现了流.批.图一体化计算 ...
- Solution -「洛谷 P3773」「CTSC 2017」吉夫特
Description Link. 求满足 \[\prod _{i=2}^{k} \binom{a_{b_{i-1}}}{a_{b_i}} \mod 2 = \binom{a_{b_1}}{a_{b_ ...
- Record - Nov. 21st, 2020 - Exam. REC & SOL
Craft Prob. 1 Desc. & Link. 有想法. printf( "nan" ); Prob.2 Desc. & Link. 没读懂 Prob. 3 ...
- npm install xxx 后加上-s、-d、-g之间的区别?
1.npm install xxx -s npm install xxx -s.npm install xxx -S是npm install xxx --save的简写形式 局部安装,记录在packa ...
- Redis系列之——主从复制原理与优化、缓存的使用和优化
@ 目录 一 什么是主从复制 1.1 原理 1.2 主库是否要开启持久化 1.3 辅助配置(主从数据一致性配置) 二 复制的 配置 2.1 slave 命令 2.2 配置文件 四 故障处理 五 复制常 ...
- CF451B
题目简化和分析: 这题就是判断将一段翻转后是否能变为升序的数组. 我的方法是保存原数组每一个数出现的位置(相同任意一个),让后另外用一个数组存储排好序后的原数组,逐一进行比较. 若同,则跳到下一个元素 ...
- C#学习笔记--进阶
C#进阶 简单数据结构类 ArrayList 元素类型以Object类型存储,支持增删查改的数组容器. 因而存在装箱拆箱操作,谨慎使用. //ArrayList ArrayList array=new ...