快捷導(dǎo)航

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

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

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

前言

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

背景

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

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

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

（2）點(diǎn)擊小鈴鐺時(shí)，斷開父頁(yè)面mqtt連接并且在新窗口打開頁(yè)面

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

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

以失敗告終的嘗試——EventBus

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

main.js文件中：

Vue.prototype.$EventBus = new Vue()

父頁(yè)面中寫一個(gè)方法用于在新窗口中打開子頁(yè)面：

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

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

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

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

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

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

救星——Window.opener

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

于是寫了如下代碼：

父頁(yè)面created生命周期：

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

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

子頁(yè)面beforeDestroy生命周期：

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

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

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

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

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

這樣問題終于解決啦~

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

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

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

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

如圖:

子頁(yè)面調(diào)用

父頁(yè)面

總結(jié)

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