当我们在子窗口中关闭窗口时,可以使用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实现关闭子窗口时刷新父窗口的更多相关文章

  1. js window.open()实现打印,如何在关闭打印窗口时刷新父窗口

    var childWin = window.open("your URL"); //获取子窗口句柄childWin.onunload = function(){ //onunloa ...

  2. js ShowDialogModal 关闭子页面并刷新父页面,保留查询条件

    不知道大家有没有碰到类似的问题,当时的你是什么思路来处理这个问题呢?是url,session,cookie,还是…… 今天笔者就遇到了这个问题,当时的想法如:url,session,cookie都尝试 ...

  3. JS实现关闭当前子窗口,刷新父窗口

    一.JS实现关闭当前子窗口,刷新父窗口 JS代码如下: <script> function refreshParent() {  window.opener.location.href = ...

  4. JS实现关闭当前子窗口,刷新父窗口及调用父窗口的方法

    一.js实现关闭当前子窗口,刷新父窗口 JS代码如下: <script> function refreshParent() {  window.opener.location.href = ...

  5. 更新记录后关闭子窗口并刷新父窗口的Javascript

    有时我们需要在新打开的窗口里面编辑信息,等编辑完了,需要将当前窗口关闭并且刷新父窗口,以使修改生效,本文就是介绍用 javascript 来实现"更新记录后关闭子窗口并刷新父窗口" ...

  6. 关闭open页面时刷新父页面列表

    var winObjEI = window.open("/Invoice/InvoiceViewEI?invoiceid=" + data.InvoiceId); ; //关闭op ...

  7. layer.js关闭子窗口及刷新父窗口

    在需要layer.js弹窗口时,当编辑完窗口内容,需要关闭及刷新父窗口时: $("#senddata").click(function(){var id = $('input[na ...

  8. iframe嵌入的子页面如何刷新父窗口

    iframe中刷新父页面方法及一些按钮刷新代码集合[原创+转]2009-07-23 11:12a页面里iframe了个b页面,我想实现在b页面里一个按钮,一按就刷新a页面,也就是父页面,不是只刷新if ...

  9. js关闭子窗口,刷新父窗口

    父页面js:function btnAdd_onclick() {window.open("xxx.jsp", "","height=600, wid ...

  10. web 打开子窗口提交数据或其他操作后 关闭子窗口且刷新父窗口实现

    父页面 : html连接:<a href="javascript:void(0)" onclick="window.open(子页面URL)">js ...

随机推荐

  1. [nginx]lua控制响应头

    前言 适用场景:添加CDN缓存时间.操作set-cookie.标记业务数据类型等. 获取响应头 指令:ngx.resp.get_headers 语法:headers = ngx.resp.get_he ...

  2. [nginx]定制http头信息

    前言 修改http响应头信息,相关Nginx模块:ngx_http_headers_module expires 语法: expires [modified] time; expires [modif ...

  3. 产品代码都给你看了,可别再说不会DDD(一):DDD入门

    这是一个讲解DDD落地的文章系列,作者是<实现领域驱动设计>的译者滕云.本文章系列以一个真实的并已成功上线的软件项目--码如云(https://www.mryqr.com)为例,系统性地讲 ...

  4. 一张图读懂TuGraph Analytics开源技术架构

    TuGraph Analytics(内部项目名GeaFlow)是蚂蚁集团开源的分布式实时图计算引擎,即流式图计算.通过SQL+GQL融合分析语言对表模型和图模型进行统一处理,实现了流.批.图一体化计算 ...

  5. 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_ ...

  6. Record - Nov. 21st, 2020 - Exam. REC & SOL

    Craft Prob. 1 Desc. & Link. 有想法. printf( "nan" ); Prob.2 Desc. & Link. 没读懂 Prob. 3 ...

  7. npm install xxx 后加上-s、-d、-g之间的区别?

    1.npm install xxx -s npm install xxx -s.npm install xxx -S是npm install xxx --save的简写形式 局部安装,记录在packa ...

  8. Redis系列之——主从复制原理与优化、缓存的使用和优化

    @ 目录 一 什么是主从复制 1.1 原理 1.2 主库是否要开启持久化 1.3 辅助配置(主从数据一致性配置) 二 复制的 配置 2.1 slave 命令 2.2 配置文件 四 故障处理 五 复制常 ...

  9. CF451B

    题目简化和分析: 这题就是判断将一段翻转后是否能变为升序的数组. 我的方法是保存原数组每一个数出现的位置(相同任意一个),让后另外用一个数组存储排好序后的原数组,逐一进行比较. 若同,则跳到下一个元素 ...

  10. C#学习笔记--进阶

    C#进阶 简单数据结构类 ArrayList 元素类型以Object类型存储,支持增删查改的数组容器. 因而存在装箱拆箱操作,谨慎使用. //ArrayList ArrayList array=new ...