JS多頁面間通訊

2021-10-02 01:48:06 字數 1387 閱讀 3963

接到這個需求的時候,先去某雲**看了一下,用的應該是websocket。給領導反饋一下後,領導說後端騰不出資源配合。那只能先排除這種方案了。

當時的思路是這樣的:

說的挺囉嗦,簡言之,就是監聽localstoragestorage事件,和頁面的關閉事件,去做出不同的反應。

下面是**,模擬該情況:

乙個主頁,表示頁面會從這裡跳往a、b、c三個頁面;

jump to page a

jump to page b

jump to page c

其中主頁的檔名為:link-index.html其他三個頁面的檔名為:link-a.html,link-b.html,link-c.html,內容為:

play

注意點:上面專案,需要在伺服器環境下啟動頁面,並且保證他們是同源的。

什麼是同源策略?同源策略限制了從同乙個源載入的文件或指令碼如何與來自另乙個源的資源進行互動。這是乙個用於隔離潛在惡意檔案的重要安全機制。如果兩個頁面的協議,埠(如果有指定)和主機都相同,表示他們是同源的。

同源的問題,可以看這裡:

關於onstorage事件:該事件不在導致資料變化的當前頁面觸發(如果瀏覽器同時開啟乙個網域名稱下面的多個頁面,當其中的乙個頁面改變 sessionstorage 或 localstorage 的資料時,其他所有頁面的 storage 事件會被觸發,而原始頁面並不觸發 storage 事件)

onstorage事件,可以看這裡:

onbeforeunload事件:

onunlaod事件:

onbeforeunload在當前主流瀏覽器相容良好,safari也支援。

想在localstorage裡儲存陣列,怎麼辦?上面**已經給出了。

至於其他方案,正在研究中,會找機會寫出。

該方案存在的缺陷:

還是覺得websocket這種方案好一些,但是目前專案中用的還是上述方案。

如果有更好的方案,而不用通過和後台互動,歡迎提供,再此先謝過!~

js頁面間通訊方法實現

在寫頁面的時候經常會碰到這樣的需求 需要兩個開啟著的頁面間傳遞資料或者事件。可觸發 storage 事件的條件如下 同乙個瀏覽器開啟了多個同源的頁面 url由協議 網域名稱 埠和路徑組成,如果兩個url的協議 網域名稱和埠相同,則表示他們同源 乙個網頁中修改localstorage 另乙個網頁註冊了...

如何實現electron多頁面間通訊

總共有兩個頁面,頁面a顯示資料,頁面b處理資料,主線程main 在主線程中開啟頁面a和b,b頁面不進行顯示,主要負責處理從a頁面傳送到主線程main上的資料,然後b將資料處理完成之後,再次將資料送到主線程main上,主線程main將資料再將資料 到頁面a上,頁面a進行資料展示。注意 在electro...

多VLAN間通訊

一 背景介紹 交換是疏通領域另乙個知識塊,與路由一樣有著舉足輕重的地方,本片就通過不同vlan間通訊的三個實現方式來講解交換的通訊過程。二 不同vlan間通訊實現方法 1.使用二層裝置實現 如下圖所示,兩個交換機之間使用埠繫結的方式以trunk連線,下聯2台同網段的pc,但不屬於同乙個vlan,大部...