Vue/Angular中父窗口新开的子窗口关闭的时候刷新父窗口
生活随笔
收集整理的這篇文章主要介紹了
Vue/Angular中父窗口新开的子窗口关闭的时候刷新父窗口
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
最近遇到一個項目需求：Angular中父窗口新開的子窗口提交完信息關(guān)閉的時候刷新父窗口。
知識點：
window.opener
概述
返回打開當(dāng)前窗口的那個窗口的引用，例如：在window A中打開了window B，B.opener 返回?A.
語法
var objRef = window.opener;例子
if (window.opener != indexWin) {referToTop(window.opener);}備注
如果當(dāng)前窗口是由另一個窗口打開的,?window.opener保留了那個窗口的引用. 如果當(dāng)前窗口不是由其他窗口打開的, 則該屬性返回 null.
Can I use
?新創(chuàng)建的window對象有一個opener屬性，其中保存著打開它的原始窗口對象。這個屬性只在彈出窗口中的最外層window對象（top）中有定義，而且指向調(diào)用window.open()的窗口或框架。表示新window需要跟另一個標(biāo)簽通信。opener設(shè)置為null,表示新打開的標(biāo)簽頁可以運行在獨立的進程中。
自己寫的測試demo能實現(xiàn)
<!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下面，提供給外部調(diào)用window['backToday'] = () => {this.goToday()}// 注冊監(jiān)聽window.addEventListener('beforeunload', e => this.beforeunloadHandler(e))},destroyed() {// 非窗口關(guān)閉的跳轉(zhuǎn)直接卸掉監(jiān)聽window.removeEventListener('beforeunload', e => this.beforeunloadHandler(e))},methods: {// 父窗口關(guān)閉方法beforeunloadHandler(e) {// 關(guān)閉父窗口window.opener && window.opener.location.reload()// 也可以只調(diào)用父窗口方法刷新數(shù)據(jù)（需要在父窗口中手動為window創(chuàng)建一個調(diào)用方法的方法）// 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(); 創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎總結(jié)
以上是生活随笔為你收集整理的Vue/Angular中父窗口新开的子窗口关闭的时候刷新父窗口的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： vue3源码中的最长递增子序列
- 下一篇： vue3 v-model变化