關(guān)于vue中對window.openner的使用指南

更新時間：2022年11月23日 12:02:25 作者：NewName

opener屬性是一個可讀可寫的屬性,可返回對創(chuàng)建該窗口的Window對象的引用,下面這篇文章主要給大家介紹了關(guān)于vue中對window.openner使用的相關(guān)資料,需要的朋友可以參考下

前言

先說結(jié)論：window.openner是做什么的？在vue中新窗口可以使用window.openner調(diào)用父窗口的方法。下面就來通過筆者的文章進(jìn)行更詳細(xì)的學(xué)習(xí)吧！

背景

最近項目中使用到了Mqtt做即時通訊的功能，需求要求主頁面全局要有一個消息提示功能，當(dāng)收到一條消息則小鈴鐺右上方顯示新消息的數(shù)目，點擊小鈴鐺則全局停止接收消息并且瀏覽器打開新窗口，在新頁面中接收消息，如下圖所示：

要實現(xiàn)如上需求需要考慮如下幾點：

（1）在父頁面中建立Mqtt連接并接收消息

（2）點擊小鈴鐺時，斷開父頁面mqtt連接并且在新窗口打開頁面

（3）在新頁面中建立Mqtt連接并接收消息

（4）新頁面關(guān)閉時，要通知父頁面重新建立Mqtt連接并接收消息

以失敗告終的嘗試——EventBus

小腦瓜左思右想之后，確定了關(guān)鍵點不就在于新窗口關(guān)閉了通知一下父窗口嗎~ 用EventBus試試吧！于是乎寫了如下代碼：

main.js文件中：

Vue.prototype.$EventBus = new Vue()

父頁面中寫一個方法用于在新窗口中打開子頁面：

toServerWorkbench() {
  const path = this.$router.resolve({ name: 'CustomerService' })
  window.open(path.href, '_blank')
},

父頁面created生命周期中監(jiān)聽reConnect事件：

this.$EventBus.$on('reConnect', () => {
  console.log('接到通知重新連接')
  this.getMqttInfo()
})

新窗口頁面beforeDestroy生命周期中觸發(fā)reConnect事件：

this.$EventBus.$emit('reConnect', {})

幾下子代碼寫完了，幸福感爆棚感覺可以摸魚了！然而一測試發(fā)現(xiàn)沒有效果（藍(lán)瘦香菇）~想了想，不好使很正常啊，都是新窗口打開的頁面和原來的頁面都不是一個vue實例了，就沒有辦法使用EventBus進(jìn)行通訊了。

救星——Window.opener

于是乎查資料了解到Window.opener可以返回對打開當(dāng)前窗口的那個窗口的引用。也就說如果A打開了B，那么B中可以使用Window.openner來引用A。

于是寫了如下代碼：

父頁面created生命周期：

window.reConnect = () => {
  console.log('接到通知重新連接')
  this.getMqttInfo()
};

這段代碼給父頁面增加了一個reConnect方法，注意是加在了window上，這樣才能使用window.openner取到這個reConnect方法。

子頁面beforeDestroy生命周期：

if (window.opener && window.opener.reConnect) {
  window.opener.reConnect()
} else {
  window.opener.frames[0].reConnect()
}

注意，這段代碼寫在子頁面的beforeDestroy中也是不起作用的，在關(guān)閉子頁面時父頁面的reConnect方法并不能被調(diào)用。

于是又查資料了解到window的onbeforeunload事件，當(dāng)瀏覽器窗口關(guān)閉或者刷新時，會觸發(fā) beforeunload 事件。

有了這個事件，我們可以使網(wǎng)頁能夠觸發(fā)一個確認(rèn)對話框，詢問用戶是否真的要離開該頁面。如果用戶確認(rèn)，瀏覽器將導(dǎo)航到新頁面，否則導(dǎo)航將會取消。同樣的，我們可以在這個事件中調(diào)用父頁面的方法，如下代碼所示：

created() {
  window.onbeforeunload = () => {
    if (window.opener && window.opener.reConnect) {
      window.opener.reConnect()
    } else {
      window.opener.frames[0].reConnect()
    }
  }
},

這樣問題終于解決啦~

補充：vue 頁面window.opener用法(在子窗體中獲得父窗體的方法)

1.當(dāng)通過window.open打開詳情頁面查看頁數(shù)據(jù)不發(fā)生變化

在子頁面調(diào)用window.opener.location.reload()//該方法可行，把父頁整體刷新，但不保留搜索條件這樣破壞了用戶輸入的查詢條件

不全頁面刷新，觸發(fā)“搜索”按鈕點擊

如圖:

子頁面調(diào)用

父頁面

總結(jié)

Window.opener可以返回對打開當(dāng)前窗口的那個窗口的引用，可以使用它調(diào)用父頁面的方法；當(dāng)瀏覽器窗口關(guān)閉或者刷新時會觸發(fā) beforeunload 事件，當(dāng)我們界面中有未提交的表單，或者有未保存的文本內(nèi)容，用戶點擊關(guān)閉按鈕，需要瀏覽器彈出提示框，就需要使用這個事件 onbeforeunload。