跳至主要內容

跨标签页通信

Mr.He大约 2 分钟

跨标签页通信

BroadcastChannel

它允许同源的不同浏览器窗口，Tab 页，frame 或者 iframe 下的不同文档之间相互通信。通过触发一个 message 事件，消息可以广播到所有监听了该频道的 BroadcastChannel 对象。

标签1：

const channel = new BroadcastChannel('myChannel');
channel.postMessage('标签1');

标签2：

const channel = new BroadcastChannel('myChannel');
channel.onmessage = function(event) {
  console.log(event.data); // 输出：标签1
};

LocalStorage或SessionStorage

在一个标签修改了storage存储的数据，会在同域名不同标签共享数据，通过监听Storage事件，获取数据变化

<body>
    <div onclick="set()">setItem</div>
    <script>
        function set(){
            localStorage.setItem("key", new Date());
        }
        window.addEventListener("storage", function(event){
            console.log('object:', event)
        })
    </script>
</body>

SharedWorker

// 创建共享进程对象，返回一个MessagePort对象
var myWorker = new SharedWorker("worker.js");

使用 port.postMessage()发送消息、使用port.onmessage 处理从 worker 返回的消息

first.onchange = function () {
  myWorker.port.postMessage('发送的信息');
  console.log("Message posted to worker");
};

myWorker.port.onmessage = function (e) {
  result1.textContent = e.data;
  console.log("Message received from worker");
};

在worker中我们使用onconnect处理

onconnect = function (e) {
  var port = e.ports[0];

  port.addEventListener("message", function (e) {
    var workerResult = "Result: " + e.data[0] * e.data[1];
    port.postMessage(workerResult);
  });

  port.start(); // Required when using addEventListener. Otherwise called implicitly by onmessage setter.
};

PostMessage API

/*
 * A 窗口的域名是<http://example.com:8080>，以下是 A 窗口的 script 标签下的代码：
 */

var popup = window.open(...popup details...);

// 如果弹出框没有被阻止且加载完成

// 这行语句没有发送信息出去，即使假设当前页面没有改变 location（因为 targetOrigin 设置不对）
popup.postMessage("The user is 'bob' and the password is 'secret'", "https://secure.example.net");

// 假设当前页面没有改变 location，这条语句会成功添加 message 到发送队列中去（targetOrigin 设置对了）
popup.postMessage("hello there!", "http://example.com");

function receiveMessage(event)
{
  // 我们能相信信息的发送者吗？(也许这个发送者和我们最初打开的不是同一个页面).
  if (event.origin !== "http://example.com") return;

  // event.source 是我们通过 window.open 打开的弹出页面 popup
  // event.data 是 popup 发送给当前页面的消息 "hi there yourself!  the secret response is: rheeeeet!"
}
window.addEventListener("message", receiveMessage, false);

WebSocket

// Create WebSocket connection.
const socket = new WebSocket("ws://localhost:8080");

// Connection opened
socket.addEventListener("open", function (event) {
  socket.send("Hello Server!");
});

// Listen for messages
socket.addEventListener("message", function (event) {
  console.log("Message from server ", event.data);
});