前言

最近看到別人的 后臺(tái)管理系統(tǒng) 做了這樣一個(gè)功能:

• 當(dāng)在列表頁(yè)時(shí)，點(diǎn)擊列表對(duì)應(yīng)的修改按鈕，瀏覽器打開(kāi)一個(gè)新的 tab 頁(yè)
• 在新的 tab 頁(yè)上是一個(gè)詳情頁(yè)，當(dāng)修改里面的詳情數(shù)據(jù)后，點(diǎn)擊提交
• 列表頁(yè)當(dāng)發(fā)現(xiàn)詳情頁(yè)面提交后，會(huì)重新請(qǐng)求數(shù)據(jù)

感覺(jué)這個(gè)功能很有趣，找了幾個(gè)比較好的方案，做一個(gè)記錄

storage

storage 可以跨頁(yè)面觸發(fā)事件,下面是 MDN 關(guān)于 storageEvent 的介紹

所以我們可以根據(jù) storage 的這個(gè)特性來(lái)做

我們使用一個(gè)按鈕模擬 列表頁(yè)面的修改按鈕

點(diǎn)擊這個(gè)按鈕,跳轉(zhuǎn)到 詳情頁(yè)面

使用 window.open 可以打開(kāi)一個(gè)新的 tab，使用 vue-router 只能在頁(yè)面內(nèi)跳轉(zhuǎn)

 doClick() {
    window.open("http://localhost:8080/detail", "_blank")
 }

在 mounted 中編寫(xiě)監(jiān)聽(tīng)函數(shù)

 window.addEventListener('storage', function (event) {
     if (event.key === 'shareData') {
       const newData = event.newValue;
       console.log('收到的更新數(shù)據(jù)：', newData);
     }
 });

在詳情頁(yè)面，我們使用 input 表示詳情 form, 一個(gè)按鈕表示 提交

在修改中只需使用 storage 保存輸入框里面的值即可(輸入框已經(jīng)使用v-model綁定在變量num上)

change() {
  localStorage.setItem('shareData', this.num);
 }  

當(dāng)點(diǎn)擊修改時(shí),可以看到 列表中的監(jiān)聽(tīng)函數(shù)生效

這個(gè) this.num 只是模擬，實(shí)際上只要 stoage 不重復(fù)即可觸發(fā)監(jiān)聽(tīng)，等觸發(fā)監(jiān)聽(tīng)后就可以重新發(fā)起請(qǐng)求

BroadcastChannel

BroadcastChannel是一個(gè)專門(mén)跨標(biāo)簽通信的解決辦法

核心在于兩個(gè) tab 使用同一個(gè) BroadcastChannel name,是頻道的唯一標(biāo)識(shí)

新建 BroadcastChannel.js,目的是為了多個(gè) tab 使用同一個(gè)BroadcastChannel.name，可以在使用通信結(jié)束過(guò)后斷開(kāi)其與對(duì)應(yīng)頻道的關(guān)聯(lián)

BroadcastChannel.js

const channelObj = new BroadcastChannel('BroadcastChannel');

export {
  channelObj
}

在列表頁(yè)中的 mounted 函數(shù)中監(jiān)聽(tīng)

import {channelObj} from "./BroadcastChannel"

 channelObj.addEventListener("message", function (event) {
      const newData = event.data;
      console.log('收到的更新數(shù)據(jù)：', newData);
  })

我們?cè)谠斍轫?yè)面使用 postMessage 發(fā)送消息

import {channelObj} from "./BroadcastChannel"

 change() {
    // 發(fā)送消息
    channelObj.postMessage(this.num);
 }

同樣的也可以收到更新后的數(shù)據(jù)，和 storage 不同的是，this.num 可以為相同的值

visibilitychange(補(bǔ)充：不涉及標(biāo)簽通信)

類似于小程序中的 onShow 方法,當(dāng)當(dāng)前 tab 頁(yè)面展示隱藏時(shí)會(huì)觸發(fā)這個(gè)事件，同樣的，在切換 tab 時(shí)也可以觸發(fā)這個(gè)事件

 window.addEventListener("visibilitychange", () => {
      if(document.visibilityState === "visible"){
        console.log("頁(yè)面可見(jiàn)")
      }else{
        console.log("頁(yè)面不可見(jiàn)")
      }
 });

在頁(yè)面可見(jiàn)時(shí)就會(huì)調(diào)用更新列表，這種方法的缺點(diǎn)是不論是否點(diǎn)擊了詳情提交按鈕都會(huì)執(zhí)行，不涉及標(biāo)簽通信

到此這篇關(guān)于Vue中跨標(biāo)簽通信詳解的文章就介紹到這了,更多相關(guān)Vue跨標(biāo)簽通信內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論