使用JS在多個頁面之間相互通訊與呼叫

2021-09-13 12:24:18 字數 1297 閱讀 3823

github:

這幾天做乙個web專案有這樣乙個需求,web專案是乙個後台管理系統,在使用系統時會開啟很多標籤頁,每個標籤頁就是乙個iframe開啟的乙個新的html頁面,現在需要在每個標籤頁之間互相通訊、互相呼叫方法。例如:開啟了a,b,c三個標籤頁,我在c頁面把資料修改了,我要通知a,b兩個頁面的資料也要更新到最新修改的資料。

在網上看到的解決辦法都是用iframe 父頁面與子頁面互相呼叫方法,但是用這種方法感覺一點都不靈活,不是很好用,有很大的侷限性。

後來在使用localstorage儲存的時候發現localstorage有這樣乙個特性。

在a介面監聽storage事件。

window.addeventlistener("storage", function (e) {

alert(e.key+'='+e.newvalue);

在b頁面修改或新增了localstorage。

localstorage.setitem('key', 'value');

然後a介面的監聽事件裡就可以接收到通知。

利用這個特性我封裝了乙個js,**如下:

用法很簡單,在所有頁面都引入上面的js,然後在a,b頁面新增監聽事件。

c頁面對資料進行了修改後就發乙個通知給a,b頁面,讓a,b頁面進行相應的操作。

就這樣乙個多頁面之間互相通訊呼叫的js就封裝好了,iframe與iframe之間的頁面可以互相通訊呼叫。瀏覽器每個標籤頁之間的頁面也可以互相通訊呼叫。

不過需要注意以下幾點:

1、 互相通訊呼叫之間的幾個頁面要放在伺服器環境,例如放在iis或者tomcat之類的服務容器裡。

2、 開啟的幾個頁面要是同源頁面,也就是幾個頁面之間ip相同,埠相同。

3、 開啟的幾個頁面必須是在同乙個瀏覽器。

4、 傳送通知傳的引數現在還只能是字串,如果要傳json型別,請先在c頁面轉字串,在a,b接收到通知後,再把字串轉回json。

5、同乙個頁面接收不到同乙個頁面傳送的通知,當然誰也不會做這種事,在同乙個頁面接收同乙個頁面傳送的通知。

網路裝置之間的相互通訊

計算機與網路裝置要相互通訊,雙方就必須基於相同的方法。比如,如何探測到通訊目標 由哪一邊先發起通訊 使用哪種語言進行通訊 怎樣結束通訊等規則都需要事先確定。不同的硬體 作業系統之間的通訊,所有的這一切都需要一種規則。而我們就把這種規則稱為協議 protocol tcp ip 是網際網路相關的各類協議...

vue中元件之間相互通訊(二)

兄弟元件之間的相互通訊 兄弟元件的通訊是需要有個專案匯流排去管理組與件之間通訊的方法。建立匯流排 bus.js,在檔案中例項化乙個新的vue例項物件 bus.js import vuefrom vue export default new vue 建立需要通訊的兩個元件 firstcomponent...

as與js相互通訊 flex中呼叫js函式

flex中as呼叫js的方法是 1 匯入包 import flash.external.externalinte ce 2 使用externalinte ce.call js函式名稱 引數 進行呼叫,其返回的值就是js函式所返回的值 js呼叫as的方法是 1 匯入包 import flash.ext...