最具有口碑的网站建设,网站开发了下载文件需要,成都广告公司简介,惊艳的网站最近遇到一个项目需求#xff1a;Angular中父窗口新开的子窗口提交完信息关闭的时候刷新父窗口。
知识点#xff1a;
window.opener
概述
返回打开当前窗口的那个窗口的引用#xff0c;例如#xff1a;在window A中打开了window B#xff0c;B.opener 返回 A.
语法
…最近遇到一个项目需求Angular中父窗口新开的子窗口提交完信息关闭的时候刷新父窗口。
知识点
window.opener
概述
返回打开当前窗口的那个窗口的引用例如在window A中打开了window BB.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
htmlheadmeta charsetutf-8 /title/titlescript srcjs/vue.js typetext/javascript charsetutf-8/script/headbodydiv idapp{{ message }}button typebutton clickcloseThisWindowclose/buttonbutton typebutton clickopenSonWindowopen/button/divscript typetext/javascriptvar 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 parentwindow.open(/test/src/index2.html)},goToday() {this.message new parent refreash}}})/script/body
/html简单直接点
window.opener.location.reload();
window.close();
