最近遇到一個項目需求: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();