大佬教程收集整理的这篇文章主要介绍了浏览器窗口间通信,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
浏览器多个标签页窗口间通信,主要是指的同源的多个页面间的通信,主要方法有本地存储通信、Web Worker
通信、Web Socket
通信。
通过浏览器对于同源页面本地存储是共享的策略实现通信,主要可以使用localstorage
、cookie
、indexDB
,注意对于sessionStroage
是在同一会话有效的,在@H_465_3@mDN中提到,通过点击链接或者使用window.open
打开的新标签页之间是属于同一个session
的,新的标签页会继承上一级会话的sessionStroage
,但新开一个标签页总是会初始化一个新的session
,即使是同源的,它们也不属于同一个session
。
// 页面A
localstorage.setItem('msg',Math.random());
// 页面B
window.addEventListener("storage",function (E) {
console.log(E);
})
// onstorage事件
// 非当前页面对localstorage进行修改时才会触发,当前页面修改localstorage不会触发监听函数
// 在对原有的数据的值进行修改时才会触发监听函数,当新设值与原有值相同时不会触发。
// 页面A
document.cookie = "msg=1;path=/";
// 页面B
function getcookie(key){
var cookies = {};
document.cookie.replace(/\s*/g,"").split(";").forEach((v) => {
let unit = v.split("=");
cookies[unit[0]] = unit[1];
})
return cookies[key];
}
seTinterval(() => {
console.log(getcookie("msg"));
},1000);
// 页面A
var db = null;
var request = indexedDB.open("message");
request.onsuccess = (E) => db = e.target.result;
request.onupgradeneeded = function(event) {
db = event.target.result;
if (!db.objectStorenames.contains('message')) {
db.createObjectStore('message',{ keyPath: 'key' });
}
};
function setData(data){
var transaction = db.transaction(['message'],'reaDWrite');
var store = transaction.objectStore(['message']);
var requestData = store.put({ key: "msg",info: data});
requestData.onsuccess = function(E) {
console.log(e.target.result);
};
};
setTimeout(() => setData(1),1000);
// 页面B
var db = null;
var request = indexedDB.open("message");
request.onsuccess = (E) => db = e.target.result;
function readMsg(){
var transaction = db.transaction(['message']);
var objectStore = transaction.objectStore('message');
var requestResult = objectStore.get('msg');
requestResult.onsuccess = function(event) {
console.log(requestResult.result.info);
};
}
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){
console.log(event.data);
};
// worker.Js
var portArr = [];
onconnect = function(E) {
var port = e.ports[0];
if(portArr.indexOf(port) === -1) portArr.push(port);
port.onmessage = function(E) {
portArr.forEach( v => {
v.postmessage(e.data);
})
}
}
使用Web Socket
将服务器作为数据中转站进行数据传输,可以实现浏览器窗口间通信,但是比较耗费服务器资源。WebSocket
是HTML5
开始提供的一种在单个TCP
连接上进行全双工通讯的协议。WebSocket
使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。在 WebSocket API
中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输。在WebSocket API
中,浏览器和服务器只需要做一个握手的动作,然后,浏览器和服务器之间就形成了一条快速通道,两者之间就直接可以数据互相传送。
http
协议,在普通http
报文中包含了一些附加头信息,其中附加头信息Upgrade: WebSocket
表明这是一个申请协议升级的http
请求。TCP
协议基础之上,和http
协议同属于应用层。ws
,如果加密传输则为wss
。https://github.com/WindrunnerMax/EveryDay
https://github.com/lmk123/blog/issues/66
https://www.cnblogs.com/cloud-/p/10713213.HTML
https://www.cnblogs.com/lalalagq/p/9921144.HTML
以上是大佬教程为你收集整理的浏览器窗口间通信全部内容,希望文章能够帮你解决浏览器窗口间通信所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。