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