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

最新推荐文章于 2024-04-20 03:05:53 发布

yusirxiaer

最新推荐文章于 2024-04-20 03:05:53 发布

阅读量830

点赞数

分类专栏： JavaScript 文章标签： angular.js vue.js javascript

本文链接：https://blog.csdn.net/yusirxiaer/article/details/122052070

版权

JavaScript 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

最近遇到一个项目需求：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();

yusirxiaer

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue/Angular中父窗口新开的子窗口关闭的时候刷新父窗口

最近遇到一个项目需求：Angular中父窗口新开的子窗口提交完信息关闭的时候刷新父窗口。知识点：window.opener概述返回打开当前窗口的那个窗口的引用，例如：在window A中打开了window B，B.opener 返回A.语法var objRef = window.opener;例子 if (window.opener != indexWin) { referToTop(window.opener); }备注如果当前窗口是由另一个窗.
复制链接

扫一扫