資訊專欄INFORMATION COLUMN
摘要：在界面監聽事件。瀏覽器每個標簽頁之間的頁面也可以互相通信調用。
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之間的頁面可以互相通信調用。瀏覽器每個標簽頁之間的頁面也可以互相通信調用。
不過需要注意以下幾點：
1、 互相通信調用之間的幾個頁面要放在服務器環境，例如放在IIS或者tomcat之類的服務容器里。
2、 打開的幾個頁面要是同源頁面，也就是幾個頁面之間IP相同，端口相同。
3、 打開的幾個頁面必須是在同一個瀏覽器。
4、 發送通知傳的參數現在還只能是字符串，如果要傳JSON類型，請先在C頁面轉字符串，在A,B接收到通知后，再把字符串轉回JSON。
5、同一個頁面接收不到同一個頁面發送的通知，當然誰也不會做這種事，在同一個頁面接收同一個頁面發送的通知。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/96111.html
摘要：動態映射利用來進行域名解析，在專門的服務器上配置主機到地址的映射。前兩者都無效的情況下，向路由器發送查詢的請求，或者直接向用戶定義的服務地址發送域名解析的請求。 【前端芝士樹】從瀏覽器搜索框輸入網址到網頁呈現發生了什么？ 這個也是在前端面試中問得比較多的一個問題了，文章篇幅有限盡可能關注一些前端開發中不太會遇到的知識點，如果想擴展的話請點擊引用文章吧，也歡迎評論，后續會繼續補充。 0....
摘要：年終總結結果到這個時間才寫，其實也是無奈。這一年最重要的事情就是順利從一只學生狗轉職為一只社畜。四月份畢業之后以前端工程師的職位入職天貓，到現在也差不多工作一年了。 年終總結結果到這個時間才寫，其實也是無奈。本來計劃過年寫的，沒想到Steam竟然開了個農歷春節特惠，然后就被各種游戲打了，辣雞平臺，斂我錢財，頹我精神，耗我青春，害我單身 以下全都是個人看法，如果有不認同的地方，請大吼一聲...
摘要：年終總結結果到這個時間才寫，其實也是無奈。這一年最重要的事情就是順利從一只學生狗轉職為一只社畜。四月份畢業之后以前端工程師的職位入職天貓，到現在也差不多工作一年了。 年終總結結果到這個時間才寫，其實也是無奈。本來計劃過年寫的，沒想到Steam竟然開了個農歷春節特惠，然后就被各種游戲打了，辣雞平臺，斂我錢財，頹我精神，耗我青春，害我單身 以下全都是個人看法，如果有不認同的地方，請大吼一聲...
閱讀 1411·2021-10-11 11:12
閱讀 3243·2021-09-30 09:46
閱讀 1633·2021-07-28 00:14
閱讀 3131·2019-08-30 13:49
閱讀 2580·2019-08-29 11:27
閱讀 3211·2019-08-26 11:52
閱讀 596·2019-08-23 18:14
閱讀 3435·2019-08-23 16:27
