Vue/Angular中父窗口新开的子窗口关闭的时候刷新父窗口
生活随笔
收集整理的這篇文章主要介紹了
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(); 創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎總結
以上是生活随笔為你收集整理的Vue/Angular中父窗口新开的子窗口关闭的时候刷新父窗口的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： vue3源码中的最长递增子序列
- 下一篇： html5倒计时秒杀怎么做,vue 设