瀏覽器視窗間通訊

瀏覽器多個標籤頁視窗間通訊，主要是指的同源的多個頁面間的通訊，主要方法有本地儲存通訊、web worker通訊、web socket通訊。

通過瀏覽器對於同源頁面本地儲存是共享的策略實現通訊，主要可以使用localstorage、cookie、indexdb，注意對於sessionstroage是在同一會話有效的，在mdn中提到，通過點選鏈結或者使用window.open開啟的新標籤頁之間是屬於同乙個session的，新的標籤頁會繼承上一級會話的sessionstroage，但新開乙個標籤頁總是會初始化乙個新的session，即使是同源的，它們也不屬於同乙個session。

// 頁面a
localstorage.setitem('msg', math.random());

// 頁面b
window.addeventlistener("storage", function (e) )
// onstorage事件
// 非當前頁面對localstorage進行修改時才會觸發，當前頁面修改localstorage不會觸發監聽函式
// 在對原有的資料的值進行修改時才會觸發監聽函式，當新設值與原有值相同時不會觸發。

// 頁面a
document.cookie = "msg=1;path=/";

// 頁面b
function getcookie(key);
document.cookie.replace(/\s*/g,"").split(";").foreach((v) => )
return cookies[key];
}setinterval(() => , 1000);

// 頁面a
var db = null;
var request = indexeddb.open("message");
request.onsuccess = (e) => db = e.target.result;
request.onupgradeneeded = function(event) );
}};function setdata(data));
requestdata.onsuccess = function(e) ;
};settimeout(() => setdata(1),1000);

// 頁面b
var db = null;
var request = indexeddb.open("message");
request.onsuccess = (e) => db = e.target.result;
function readmsg();
}settimeout(readmsg, 3000);

html5中的web worker可以分為兩種不同執行緒型別，乙個是專用線程dedicated worker，乙個是共享執行緒shared worker。

dedicated worker直接使用new worker()即可建立，這種webworker是當前頁面專有的。

sharedworker可以被多個window、標籤頁、iframe共同使用，但必須保證這些標籤頁都是同源的。

// 頁面a
var worker = new sharedworker('worker.js');
worker.port.start();
worker.port.postmessage(1);

// 頁面b
var worker = new sharedworker('worker.js');
worker.port.start();
worker.port.onmessage = function(event);

// worker.js
var portarr = ;
onconnect = function(e) )
}}

使用web socket將伺服器作為資料中轉站進行資料傳輸，可以實現瀏覽器視窗間通訊，但是比較耗費伺服器資源。websocket是html5開始提供的一種在單個tcp連線上進行全雙工通訊的協議。websocket使得客戶端和伺服器之間的資料交換變得更加簡單，允許服務端主動向客戶端推送資料。在websocket api中，瀏覽器和伺服器只需要完成一次握手，兩者之間就直接可以建立永續性的連線，並進行雙向資料傳輸。在websocket api中，瀏覽器和伺服器只需要做乙個握手的動作，然後，瀏覽器和伺服器之間就形成了一條快速通道，兩者之間就直接可以資料互相傳送。

瀏覽器視窗間通訊

兩個瀏覽器視窗間通訊總結

瀏覽器視窗關閉

瀏覽器視窗的大小

瀏覽器視窗間通訊

兩個瀏覽器視窗間通訊總結

瀏覽器視窗關閉

瀏覽器視窗的大小

相關推薦