vue使用window.open（）跳轉(zhuǎn)頁(yè)面

項(xiàng)目場(chǎng)景：

提示：項(xiàng)目需要vue帶參數(shù)跳轉(zhuǎn)打開(kāi)新頁(yè)面、新窗口：

例如：點(diǎn)擊機(jī)巢監(jiān)控按鈕，在當(dāng)前頁(yè)面重新打開(kāi)一個(gè)窗口到另一個(gè)頁(yè)面（同時(shí)把參數(shù)全部帶過(guò)去）

window.open()的用法

open() 方法用于打開(kāi)一個(gè)新的瀏覽器窗口或查找一個(gè)已命名的窗口。

window.open(URL,name,specs,replace)

碼如下：

路徑：

{
    path: "/machineMonitor",
    name: "xxx平臺(tái)",
    component: () => import("@/page/machineMonitor"),
    meta: {
      keepAlive: false,
      isTab: false,
      isAuth: true
    }
  },

 按鈕：

 <el-button size="mini" type="primary" @click="handleReadMachine(item)"
     style="margin: 5px 5px 5px 0"><i class="my-icon el-icon-view"></i>&nbsp;機(jī)巢監(jiān)控
</el-button>

 跳轉(zhuǎn)事件： 

handleReadMachine(row) {
      let newUrl = this.$router.resolve({
        path: "/machineMonitor",
        query: {
          data: JSON.stringify(row),
        },
      });
      window.open(newUrl.href, "_blank");
    },

vue中對(duì)window.openner的使用

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

背景

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

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

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

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

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

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

以失敗告終的嘗試——EventBus

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

main.js文件中：

Vue.prototype.$EventBus = new Vue()

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

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

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

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

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

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

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

救星——Window.opener

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

于是寫(xiě)了如下代碼：

父頁(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()
}

注意，這段代碼寫(xiě)在子頁(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ì)話框，詢(xún)問(wèn)用戶是否真的要離開(kāi)該頁(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()
    }
  }
},

這樣問(wèn)題終于解決啦~

總結(jié)

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

參考資料

【1】MDN：window.opener

【2】MDN: Window: beforeunload event

【3】window-onbeforeunload 的使用

到此這篇關(guān)于vue中對(duì)window.openner的使用的文章就介紹到這了,更多相關(guān)vue window.openner使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論