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

GitHub：https://github.com/roomanl/ev...

這幾天作一個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之間的頁面能夠互相通訊調用。瀏覽器每一個標籤頁之間的頁面也能夠互相通訊調用。

不過須要注意如下幾點：

一、 互相通訊調用之間的幾個頁面要放在服務器環境，例如放在IIS或者tomcat之類的服務容器裏。

二、 打開的幾個頁面要是同源頁面，也就是幾個頁面之間IP相同，端口相同。

三、 打開的幾個頁面必須是在同一個瀏覽器。

四、 發送通知傳的參數如今還只能是字符串，若是要傳JSON類型，請先在C頁面轉字符串，在A,B接收到通知後，再把字符串轉回JSON。

五、同一個頁面接收不到同一個頁面發送的通知，固然誰也不會作這種事，在同一個頁面接收同一個頁面發送的通知。