在寫頁面的時候經常會碰到這樣的需求:需要兩個開啟著的頁面間傳遞資料或者事件。
可觸發「storage」事件的條件如下:
同乙個瀏覽器開啟了多個同源的頁面(url由協議、網域名稱、埠和路徑組成,如果兩個url的協議、網域名稱和埠相同,則表示他們同源);
乙個網頁中修改localstorage;
另乙個網頁註冊了storage事件。
//這個**,協議是http:
//網域名稱是www.cnblogs.cn,埠是80(預設埠可以省略)
//對比url:
//同源
//不同源
//不同源
//不同源
在測試的時候,一定要保證是同源頁面。
下面是頁面間互動**,實現非常簡單,pagea和pageb之間通訊。
pagea:新增「storage」監聽
doctype html
>
<
html
>
<
head
>
<
title
>page a
title
>
head
>
<
body
>
<
script
>
window.addeventlistener(
"storage",
function
(e) );
script
>
body
>
html
>
pageb:設定localstorage
doctype html
>
<
html
>
<
head
>
<
title
>page b
title
>
head
>
<
body
>
<
button
>click<
button
>
body
>
<
script
>
document.queryselector(
'button
').onclick
=function
()script
>
html
>
JS多頁面間通訊
接到這個需求的時候,先去某雲 看了一下,用的應該是websocket。給領導反饋一下後,領導說後端騰不出資源配合。那只能先排除這種方案了。當時的思路是這樣的 說的挺囉嗦,簡言之,就是監聽localstorage的storage事件,和頁面的關閉事件,去做出不同的反應。下面是 模擬該情況 乙個主頁,表...
如何實現electron多頁面間通訊
總共有兩個頁面,頁面a顯示資料,頁面b處理資料,主線程main 在主線程中開啟頁面a和b,b頁面不進行顯示,主要負責處理從a頁面傳送到主線程main上的資料,然後b將資料處理完成之後,再次將資料送到主線程main上,主線程main將資料再將資料 到頁面a上,頁面a進行資料展示。注意 在electro...
程序間通訊實現方法
程序間通訊實現方法 程序通常被定義為乙個正在執行的程式的例項,它由兩個部分組成 乙個是作業系統用來管理程序的核心物件。核心物件也是系統用來存放關於程序的統計資訊的地方 另乙個是位址空間,它包含所有的可執行模組或dll模組的 和資料。它還包含動態分配的空間。如執行緒堆疊和堆分配空間。每個程序被賦予它自...