Vue/Angular中父窗口新开的子窗口关闭的时候刷新父窗口

最近遇到一个项目需求:Angular中父窗口新开的子窗口提交完信息关闭的时候刷新父窗口。

知识点:

window.opener

概述

返回打开当前窗口的那个窗口的引用,例如:在window A中打开了window B,B.opener 返回 A.

语法

var objRef = window.opener;

例子

 if (window.opener != indexWin) {referToTop(window.opener);}

备注

如果当前窗口是由另一个窗口打开的, window.opener保留了那个窗口的引用. 如果当前窗口不是由其他窗口打开的, 则该属性返回 null.

Can I use

 新创建的window对象有一个opener属性,其中保存着打开它的原始窗口对象。这个属性只在弹出窗口中的最外层window对象(top)中有定义,而且指向调用window.open()的窗口或框架。表示新window需要跟另一个标签通信。opener设置为null,表示新打开的标签页可以运行在独立的进程中。

自己写的测试demo能实现

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><script src="js/vue.js" type="text/javascript" charset="utf-8"></script></head><body><div id="app">{{ message }}<button type="button" @click="closeThisWindow">close</button><button type="button" @click="openSonWindow">open</button></div><script type="text/javascript">var app = new Vue({el: '#app',data: {message: 'Hello Vue!'},mounted() {// 将backToday方法绑定到window下面,提供给外部调用window['backToday'] = () => {this.goToday()}// 注册监听window.addEventListener('beforeunload', e => this.beforeunloadHandler(e))},destroyed() {// 非窗口关闭的跳转直接卸掉监听window.removeEventListener('beforeunload', e => this.beforeunloadHandler(e))},methods: {// 父窗口关闭方法beforeunloadHandler(e) {// 关闭父窗口window.opener && window.opener.location.reload()// 也可以只调用父窗口方法刷新数据(需要在父窗口中手动为window创建一个调用方法的方法)// window.opener && window.opener.backToday()},closeThisWindow() {// 第二种方式直接就是好window.opener.location.reload();window.close();},openSonWindow() {this.message = 'new parent'window.open('/test/src/index2.html')},goToday() {this.message = 'new parent refreash'}}})</script></body>
</html>

简单直接点

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/247254.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

图像边缘特征

图像边缘是图像的重要特征&#xff0c;是图像中特性&#xff08;如像素灰度、纹理等&#xff09;分布的不连续处&#xff0c;图像周围特性有阶跃变化或屋脊状变化的那些像素集合。图像的边缘部分集中了图像的大部分信息&#xff0c;一幅图像的边缘结构与特点往往是决定图像特质…

HDU 6631 line symmetric(枚举)

首先能想到的是至少有一对相邻点或者中间间隔一个点的点对满足轴对称&#xff0c;那么接下来只需要枚举剩下的点对是否满足至多移动一个点可以满足要求。 第一种情况&#xff0c;对于所有点对都满足要求&#xff0c;那么Yes。 第二种情况&#xff0c;有一个点不满足要求&#x…

学习数字图像处理经验谈

一、面向应用&#xff1a;层层分解、抓住要点 我们学习数字图像处理的最终目的还是应用&#xff0c;不管是用它来研制产品还是研发项目抑或是研究课题&#xff0c;都要用数字图像处理的理论、方法和技术来解决实际问题。在此过程中&#xff0c;提高效率是非常重要的&#xff0c…

读javascript百炼成仙笑死笔记一

“自然是这样的&#xff0c;但是我现在这样改一下&#xff0c;你说结果是多少呢&#xff1f;”叶小凡诡异地笑了笑&#xff0c;然后打出一段比较奇特的代码。 var a 1; var b; var sum (b a --a) a-- b; “噗&#xff01;”看到这段代码&#xff0c;对面弟子差点一口老血…

C#调用存储过程的通用类

usingSystem;usingSystem.Collections.Generic;usingSystem.Text;usingSystem.Data.SqlClient;usingSystem.Collections;usingSystem.Data;//摘要&#xff1a;数据访问助手。//作者&#xff1a;ZhiQiao//日期&#xff1a;2008/07/02namespaceZhiQiao.DataAccessHelper{ //存…

图灵奖得主(一)

本文转自&#xff1a;http://bbs.gxnu.edu.cn/bbsanc.php?path%2Fgroups%2FGROUP_5%2FProgramming%2Fother%2FM.1029997222.A A.M. Turing Award ACMs most prestigious technical award is accompanied by a prize of $25,000. It is given to an individual selected fo…

react-router-dom@6获取路由传参

目录 参数获取 1、子路由形式携带 2、问号(?)形式参数 3、事件跳转传参 router/index.tsx import App from "App"; import Home from "pages/Home"; import List from "pages/List"; import Detail from "pages/Detail"; import…

图灵奖得主(二)

本文转自&#xff1a;http://bbs.gxnu.edu.cn/bbsanc.php?path%2Fgroups%2FGROUP_5%2FProgramming%2Fother%2FM.1029997222.A 1987年度的图灵奖授予了IBM沃特森研究中心老资格的研究员 约翰科克(Johncocke)。 科克是从机械到数学、又从数学转到 计算机方向上来的学者。…

jQuery效果之滑动

jQuery 滑动方法有三种&#xff1a;slideDown()、slideUp()、slideToggle()。 jQuery slideDown() 方法用于向下滑动元素&#xff0c; 语法&#xff1a;$(selector).slideDown(speed,callback); 可选的 speed 参数规定效果的时长。它可以取以下值&#xff1a;"slow"、…

Error: This command has to be run with superuser privileges (under the root user on most systems).

意思是错误&#xff1a;此命令必须以超级用户权限&#xff08;在大多数系统上以root用户权限&#xff09;运行。所以当前的用户是普通用户&#xff0c;需要切换为超级用户&#xff08;root用户&#xff09;先输入在命令行中输入 su root 然后会出现Password&#xff1a;&#…

图灵奖得主(三)

本文转自&#xff1a;本文转自&#xff1a;http://bbs.gxnu.edu.cn/bbsanc.php?path%2Fgroups%2FGROUP_5%2FProgramming%2Fother%2FM.1029997222.A 继1979年度图灵奖首次授予一位加拿大学者K.E.Iverson之后&#xff0c; 1989年度的图灵 奖又一次授予加拿大学者威廉凯亨(Willia…

对微信公共号的理解

通过redirect_uri获取code 通过code和appid 获取access_token 进行鉴权 转载于:https://www.cnblogs.com/zhouyideboke/p/11309752.html

vue3 v-model变化

概览 就变化内容而言&#xff0c;此部分属于高阶内容&#xff1a; 非兼容&#xff1a;用于自定义组件时&#xff0c;v-model的 prop 和事件默认名称已更改&#xff1a; prop&#xff1a;value -> modelValue&#xff1b;event&#xff1a;input -> update:modelValue&a…

图灵奖得主(四)

本文转自&#xff1a;本文转自&#xff1a;本文转自&#xff1a;http://bbs.gxnu.edu.cn/bbsanc.php?path%2Fgroups%2FGROUP_5%2FProgramming%2Fother%2FM.1029997222.A 1991年度的图灵奖授予了爱丁堡大学计算机科学系教授罗 宾米尔纳(Robin Milner)。米尔纳是继M.V.Wilkes(1…

sql 日期类型空值等于 1900-01-01

SQL server 中查询&#xff1a;select cast( as datetime) 结果&#xff1a;1900-01-01 00:00:00.000 做为判断条件的话&#xff0c;要注意。不能直接 转载于:https://www.cnblogs.com/meng9527/p/11311765.html

koa洋葱模型

Koa 和 Express 都会使用到中间件 Express的中间件是顺序执行&#xff0c;从第一个中间件执行到最后一个中间件&#xff0c;发出响应如上图 Koa是从第一个中间件开始执行&#xff0c;遇到 next 进入下一个中间件&#xff0c;一直执行到最后一个中间件&#xff0c;在逆序&#x…

图灵奖得主(五)

[1993]斯坦恩斯--"打工"带来的机遇 斯坦恩斯是学数学出身的。1958年他在卡尔顿学院(Carlton College)取 得数学学士学位后进入普林斯顿大学研究生院&#xff0c;用了3年时间就 取得博士学位&#xff0c;其博士论文课题是关于博奕论的。 斯坦恩斯跨进计算机科…

koa后端允许跨域

举个例子 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta http-equiv"X-UA-Compatible" content"IEedge" /><meta name"viewport" content"widthdevice-width…

python面向对象之继承

面向对象之继承 什么是面向对象的继承&#xff1f; 继承&#xff08;英语&#xff1a;inheritance&#xff09;是面向对象软件技术当中的一个概念。如果一个类别A“继承自”另一个类别B&#xff0c;就把这个A称 为“B的子类别”&#xff0c;而把B称为“A的父类别”也可以称“B是…

美国正面临“人才泡沫”破裂危机?

&#xff08;Jason Lane和Kevin Kinser/文&#xff09;最近&#xff0c;与教育有关的种种问题在美国社会引起了广泛讨论。首先巨额的学生贷款问题&#xff1a;根据美联储纽约分行在2012年11月发布的一份报告&#xff0c;全美学生贷款总额已经达到420亿美元&#xff0c;其中新增…