专业网站制作仪表多少钱,如何连接到网站服务器,wordpress 时区,做资源下载网站用什么工具跨标签页通信的常见方案
LocalStorage 或 SessionStorage
BroadCast Channel
Service Worker
Shared Worker
Window.postMessage()
Cookies
IndexedDB
什么是跨标签页通信#xff1f;
指在同一个浏览器窗口中的多个标签页之间进行数据交流和信息传递的过程。通常情况…跨标签页通信的常见方案
LocalStorage 或 SessionStorage
BroadCast Channel
Service Worker
Shared Worker
Window.postMessage()
Cookies
IndexedDB
什么是跨标签页通信
指在同一个浏览器窗口中的多个标签页之间进行数据交流和信息传递的过程。通常情况下每个标签页都是一个独立的浏览器上下文它们之间是相互隔离的无法直接访问对方的数据或进行通信。
跨标签页通信的目的是允许这些相互隔离的标签页之间进行信息共享和交互。通过跨标签页通信可以实现数据的共享、状态的同步、消息的传递等功能。
例如在一个标签页中进行了某个操作希望其他标签页能够及时获得相关的变化和通知就需要使用跨标签页通信机制来实现这种交互。
跨标签页通信主要用于哪些需求
① 数据共享当多个标签页需要访问和共享相同的数据时跨标签页通信可以用于在这些标签页之间传递数据确保它们保持同步。
② 状态同步在一些应用中可能会有多个标签页用于展示相同的应用状态或会话状态。通过跨标签页通信可以实现状态的同步使得在一个标签页中的操作能够即时反映到其他标签页上。
③ 消息通知跨标签页通信可以用于实现在一个标签页中发送消息然后其他标签页接收并展示这些消息的功能。
④ 共享资源在某些场景下可能需要在多个标签页之间共享某些资源如网络连接、音频/视频播放器等等。
⑤ 多窗口管理对于一些具有多个窗口的应用跨标签页通信可以用于实现窗口之间的联动和数据同步。
常见方案的实现
方案一LocalStorage 或 SessionStorage
使用 Web 存储机制( LocalStorage 或 SessionStorage )可以在不同标签页之间共享数据。一个标签页可以将数据存储在 LocalStorage 或 SessionStorage 中其他标签页可以监听存储事件来获取更新的数据。
/* 在一个标签页中写入数据到 LocalStorage 或 SessionStorage */
localStorage.setItem(shareData, 标签页111);
// sessionStorage.setItem(shareData, 标签页111);/* 在其他标签页中监听存储事件并获取更新的数据 */
window.addEventListener(storage, function(event) {if (event.key shareData) {const newData event.newValue;console.log(收到的更新数据, newData);}
});/* 在另一个标签页中更新数据到 LocalStorage 或 SessionStorage */
localStorage.setItem(shareData, 标签页222);
// sessionStorage.setItem(shareData, 标签页222);
首先在一个标签页中通过 localStorage.setItem() 或 sessionStorage.setItem() 方法将数据写入到 LocalStorage 或 SessionStorage 中。
然后在其他标签页中通过监听 storage 事件来捕获存储事件并判断事件的 key 是否为我们共享的数据 sharedData如果是则获取更新的数据 newValue 并进行处理。
最后在另一个标签页中通过 localStorage.setItem() 或 sessionStorage.setItem() 方法更新数据。
方案二Broadcast Channel
Broadcast Channel API 允许不同标签页之间通过共享的通道进行消息广播和接收。一个标签页可以通过通道发送消息其他订阅了相同通道的标签页可以接收到这些消息。
在发送消息的标签页中
/* 创建一个广播通道 */
const channelObj new BroadcastChannel(televiseChannel);// 发送消息
channelObj.postMessage(标签页111);
在接收消息的标签页中
/* 创建一个广播通道 */
const channelObj new BroadcastChannel(televiseChannel);// 监听消息事件
channelObj.onmessage function(event) {const newData event.data;console.log(收到的更新数据, newData);
};
在发送消息的标签页中创建一个 Broadcast Channel并指定一个唯一的通道名称(这里使用televiseChannel)。通过 channelObj.postMessage() 方法发送消息到该通道。
在接收消息的标签页中同样创建一个具有相同通道名称的 Broadcast Channel。然后通过为 channelObj.onmessage 赋值一个函数来监听消息事件。当接收到消息时事件对象 event 中的 data 属性将包含发送的消息内容我们可以在监听函数中获取并处理该消息。
方案三Service Worker
Service Worker 是一种独立于网页的脚本可以在后台运行提供离线缓存和消息传递等功能。标签页可以通过 Service Worker 进行通信发送消息和接收消息。
方案四Shared Worker
Shared Worker 是一种在多个标签页之间共享的后台线程。标签页可以通过 SharedWorker 进行通信发送消息和接收消息。这种方式需要使用 JavaScript 的 Worker API。
在发送消息的标签页中
/* 创建一个 SharedWorker */
const worker new SharedWorker(worker.js);// 发送消息
worker.port.postMessage(标签页111);
在共享的 Worker 脚本文件 worker.js 中
/* 监听连接事件 */
self.onconnect function(event) {const port event.ports[0];// 监听消息事件port.onmessage function(event) {const newData event.data;console.log(收到的更新数据, newData);};// 发送消息port.postMessage(你好啊Worker);
};
在发送消息的标签页中创建一个 SharedWorker并指定共享的 Worker 脚本文件路径为 worker.js。然后通过 worker.port.postMessage() 方法发送消息到 SharedWorker。
在共享的 Worker 脚本文件 worker.js 中通过监听 self.onconnect 事件来捕获连接事件并获取与标签页之间的通信端口 port。然后通过为 port.onmessage 赋值一个函数来监听消息事件。当接收到消息时事件对象 event 中的 data 属性将包含发送的消息内容我们可以在监听函数中获取并处理该消息。
方案五Window.postMessage()
Window.postMessage() 方法允许在不同的窗口或标签页之间安全地传递消息。通过调用 postMessage() 方法并指定目标窗口的 origin可以将消息发送到其他标签页并通过监听 message 事件来接收消息。
在发送消息的标签页中
/* 监听消息事件 */
window.addEventListener(message, function(event) {// 确保消息来自预期的源if (event.origin ! http://example.com) return;const newData event.data;console.log(收到的更新数据, newData);
});// 发送消息到其他标签页
const targetWindow window.open(http://example.com/otherpage, _blank);
targetWindow.postMessage(标签页111, http://example.com);
在接收消息的标签页中
/* 监听消息事件 */
window.addEventListener(message, function(event) {// 确保消息来自预期的源if (event.origin ! http://example.com) return;const newData event.data;console.log(收到的更新数据, newData);// 回复消息event.source.postMessage(标签页222, event.origin);
});
在发送消息的标签页中通过使用 window.addEventListener(message, ...) 监听消息事件。在事件处理函数中可以用 event.origin 来验证消息的来源是否符合预期。然后可以用 event.data 获取到发送的消息内容并进行相应的操作。
在发送消息的标签页中用 window.open() 打开了一个新的标签页(http://example.com/otherpage)然后通用 targetWindow.postMessage() 向该标签页发送消息。在这里我们指定了消息的目标窗口和预期的来源(即目标标签页的 URL)。
在接收消息的标签页中同样通过 window.addEventListener(message, ...) 监听消息事件并在事件处理函数中进行相应的操作。
方案六Cookies
可以将需要共享的数据存储在 Cookies 中并在不同的标签页之间读取和更新这些 Cookies。当一个标签页更新数据时将数据写入到 Cookies 中其他标签页可以通过监听 Cookies 变化事件或定时读取 Cookies 来获取最新的数据。
使用 Cookies 进行通信是一种简单的方法但它主要用于在客户端和服务器之间传递数据而不是直接实现跨标签页通信。Cookies 会自动在客户端和服务器之间进行传递因此可以在不同的标签页之间共享数据。
在发送消息的标签页中
/* 设置 Cookie 值 */
document.cookie shareData标签页111;
在接收消息的标签页中
/* 获取 Cookie 值 */
const cookies document.cookie;
const cookieArr cookies.split(;);
const strField shareData;let newData null;
for (let i 0; i cookieArr.length; i) {const cookie cookieArr[i].trim();if (cookie.startsWith(strField)) {newData cookie.substring(strField.length, cookie.length);break;}
}
console.log(收到的更新数据, newData);
方案七IndexedDB
IndexedDB 是浏览器提供的一个客户端数据库可以在不同的标签页之间存储和读取数据。一个标签页可以将数据写入 IndexedDB其他标签页可以监听 IndexedDB 的变化事件或定时从 IndexedDB 中读取数据来实现数据的共享和状态的同步。
/* 打开或创建 IndexedDB 数据库 */
const request indexedDB.open(dataBase, 1);/* 成功打开数据库 */
request.onsuccess function(event) {const db event.target.result;// 创建一个对象存储空间(类似表)const objectStore db.createObjectStore(messages, { keyPath: id, autoIncrement: true });// 添加一条消息到对象存储空间const message { text: Hello, World! };const addRequest objectStore.add(message);addRequest.onsuccess function(event) {console.log(消息已添加到IndexedDB);};addRequest.onerror function(event) {console.error(添加消息到IndexedDB时发生错误);};// 从对象存储空间获取所有消息const getAllRequest objectStore.getAll();getAllRequest.onsuccess function(event) {const messages event.target.result;console.log(所有消息:, messages);};getAllRequest.onerror function(event) {console.error(获取消息时发生错误);};
};/* 打开或创建数据库时发生错误 */
request.onerror function(event) {console.error(打开/创建数据库时发生错误);
};/* 数据库版本变更 */
request.onupgradeneeded function(event) {const db event.target.result;// 创建一个对象存储空间const objectStore db.createObjectStore(messages, { keyPath: id, autoIncrement: true });console.log(数据库版本已更新);
};
