瀏覽器多個標籤頁視窗間通訊,主要是指的同源的多個頁面間的通訊,主要方法有本地儲存通訊、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
中,瀏覽器和伺服器只需要做乙個握手的動作,然後,瀏覽器和伺服器之間就形成了一條快速通道,兩者之間就直接可以資料互相傳送。
兩個瀏覽器視窗間通訊總結
乙個視窗更新 storage,另乙個視窗監聽 window 物件的 storage 事件,來實現通訊。注意 兩個視窗要同源 url的協議 網域名稱 埠號都要相同 本視窗更新storage localstorage.setitem name jim 其他視窗監聽storage事件 window.add...
瀏覽器視窗關閉
一般的視窗關閉的js如下寫法 window.close 但是呢,chrome,firefox等中有時候會不起作用。改為下面的寫法 window.open about blank self close 或者window.open self close 如果是frame的時候如下寫法 一般 window...
瀏覽器視窗的大小
var w window.innerwidth document.documentelement.clientwidth document.body.clientwidth var h window.innerheight document.documentelement.clientheight ...