資訊專欄INFORMATION COLUMN
摘要：在界面監(jiān)聽事件。瀏覽器每個(gè)標(biāo)簽頁之間的頁面也可以互相通信調(diào)用。
GitHub：https://github.com/roomanl/ev...
這幾天做一個(gè)web項(xiàng)目有這樣一個(gè)需求，web項(xiàng)目是一個(gè)后臺(tái)管理系統(tǒng)，在使用系統(tǒng)時(shí)會(huì)打開很多標(biāo)簽頁，每個(gè)標(biāo)簽頁就是一個(gè)iframe打開的一個(gè)新的html頁面，現(xiàn)在需要在每個(gè)標(biāo)簽頁之間互相通信、互相調(diào)用方法。例如：打開了A,B,C三個(gè)標(biāo)簽頁，我在C頁面把數(shù)據(jù)修改了，我要通知A,B兩個(gè)頁面的數(shù)據(jù)也要更新到最新修改的數(shù)據(jù)。
在網(wǎng)上看到的解決辦法都是用iframe 父頁面與子頁面互相調(diào)用方法，但是用這種方法感覺一點(diǎn)都不靈活，不是很好用，有很大的局限性。
后來在使用localStorage存儲(chǔ)的時(shí)候發(fā)現(xiàn)localStorage有這樣一個(gè)特性。
在A界面監(jiān)聽storage事件。
window.addEventListener("storage", function (e) {
alert(e.key+"="+e.newValue);
});
在B頁面修改或添加了localStorage。
localStorage.setItem("key", "value");
然后A界面的監(jiān)聽事件里就可以接收到通知。
利用這個(gè)特性我封裝了一個(gè)JS，代碼如下：
用法很簡(jiǎn)單，在所有頁面都引入上面的JS，然后在A,B頁面添加監(jiān)聽事件。
C頁面對(duì)數(shù)據(jù)進(jìn)行了修改后就發(fā)一個(gè)通知給A,B頁面，讓A,B頁面進(jìn)行相應(yīng)的操作。
就這樣一個(gè)多頁面之間互相通信調(diào)用的JS就封裝好了，iframe與iframe之間的頁面可以互相通信調(diào)用。瀏覽器每個(gè)標(biāo)簽頁之間的頁面也可以互相通信調(diào)用。
不過需要注意以下幾點(diǎn)：
1、 互相通信調(diào)用之間的幾個(gè)頁面要放在服務(wù)器環(huán)境，例如放在IIS或者tomcat之類的服務(wù)容器里。
2、 打開的幾個(gè)頁面要是同源頁面，也就是幾個(gè)頁面之間IP相同，端口相同。
3、 打開的幾個(gè)頁面必須是在同一個(gè)瀏覽器。
4、 發(fā)送通知傳的參數(shù)現(xiàn)在還只能是字符串，如果要傳JSON類型，請(qǐng)先在C頁面轉(zhuǎn)字符串，在A,B接收到通知后，再把字符串轉(zhuǎn)回JSON。
5、同一個(gè)頁面接收不到同一個(gè)頁面發(fā)送的通知，當(dāng)然誰也不會(huì)做這種事，在同一個(gè)頁面接收同一個(gè)頁面發(fā)送的通知。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/96111.html
摘要：動(dòng)態(tài)映射利用來進(jìn)行域名解析，在專門的服務(wù)器上配置主機(jī)到地址的映射。前兩者都無效的情況下，向路由器發(fā)送查詢的請(qǐng)求，或者直接向用戶定義的服務(wù)地址發(fā)送域名解析的請(qǐng)求。 【前端芝士樹】從瀏覽器搜索框輸入網(wǎng)址到網(wǎng)頁呈現(xiàn)發(fā)生了什么？ 這個(gè)也是在前端面試中問得比較多的一個(gè)問題了，文章篇幅有限盡可能關(guān)注一些前端開發(fā)中不太會(huì)遇到的知識(shí)點(diǎn)，如果想擴(kuò)展的話請(qǐng)點(diǎn)擊引用文章吧，也歡迎評(píng)論，后續(xù)會(huì)繼續(xù)補(bǔ)充。 0....
摘要：年終總結(jié)結(jié)果到這個(gè)時(shí)間才寫，其實(shí)也是無奈。這一年最重要的事情就是順利從一只學(xué)生狗轉(zhuǎn)職為一只社畜。四月份畢業(yè)之后以前端工程師的職位入職天貓，到現(xiàn)在也差不多工作一年了。 年終總結(jié)結(jié)果到這個(gè)時(shí)間才寫，其實(shí)也是無奈。本來計(jì)劃過年寫的，沒想到Steam竟然開了個(gè)農(nóng)歷春節(jié)特惠，然后就被各種游戲打了，辣雞平臺(tái)，斂我錢財(cái)，頹我精神，耗我青春，害我單身 以下全都是個(gè)人看法，如果有不認(rèn)同的地方，請(qǐng)大吼一聲...
摘要：年終總結(jié)結(jié)果到這個(gè)時(shí)間才寫，其實(shí)也是無奈。這一年最重要的事情就是順利從一只學(xué)生狗轉(zhuǎn)職為一只社畜。四月份畢業(yè)之后以前端工程師的職位入職天貓，到現(xiàn)在也差不多工作一年了。 年終總結(jié)結(jié)果到這個(gè)時(shí)間才寫，其實(shí)也是無奈。本來計(jì)劃過年寫的，沒想到Steam竟然開了個(gè)農(nóng)歷春節(jié)特惠，然后就被各種游戲打了，辣雞平臺(tái)，斂我錢財(cái)，頹我精神，耗我青春，害我單身 以下全都是個(gè)人看法，如果有不認(rèn)同的地方，請(qǐng)大吼一聲...
閱讀 1421·2021-10-11 11:12
閱讀 3252·2021-09-30 09:46
閱讀 1638·2021-07-28 00:14
閱讀 3141·2019-08-30 13:49
閱讀 2589·2019-08-29 11:27
閱讀 3239·2019-08-26 11:52
閱讀 606·2019-08-23 18:14
閱讀 3441·2019-08-23 16:27
