GitHub：https://github.com/roomanl/eventJS
這幾天做一個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、同一個頁面接收不到同一個頁面發送的通知，當然誰也不會做這種事，在同一個頁面接收同一個頁面發送的通知。