GitHub：https://github.com/roomanl/eventJShtml
這幾天作一個web項目有這樣一個需求，web項目是一個後臺管理系統，在使用系統時會打開不少標籤頁，每一個標籤頁就是一個iframe打開的一個新的html頁面，如今須要在每一個標籤頁之間互相通訊、互相調用方法。例如：打開了A,B,C三個標籤頁，我在C頁面把數據修改了，我要通知A,B兩個頁面的數據也要更新到最新修改的數據。git
在網上看到的解決辦法都是用iframe 父頁面與子頁面互相調用方法，可是用這種方法感受一點都不靈活，不是很好用，有很大的侷限性。github
後來在使用localStorage存儲的時候發現localStorage有這樣一個特性。web
在A界面監聽storage事件。瀏覽器
window.addEventListener("storage", function (e) {tomcat
alert(e.key+'='+e.newValue);服務器
});htm
在B頁面修改或添加了localStorage。blog
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。
五、同一個頁面接收不到同一個頁面發送的通知，固然誰也不會作這種事，在同一個頁面接收同一個頁面發送的通知。