前端开发者必看：探索跨标签页通信的多种方式探索前端跨页面通信的多种方案，包括BroadcastChannel、windo

前言

最近有个需求，想让我们的配置项弹窗可以像本地app那样，可以独立另一个窗口，可以随意拖拽，并且可以自由的拖动大小，并且内部的配置改动可以实时反映到当前页面上。

这就涉及到了跨标签页的通信问题。

研究了一下，我们可以通过 broadCastChannel 来实现跨标签页面通讯。

BroadcastChannel

BroadcastChannel 接口代理了一个命名频道，可以让指定 origin 下的任意 browsing context 来订阅它。

它允许同源的不同浏览器窗口，Tab 页，frame 或者 iframe 下的不同文档之间相互通信。

通过触发一个 message 事件，消息可以广播到所有监听了该频道的 BroadcastChannel 对象。

创建一个 BroadcastChannel 对象

broadCastChannel 需要指定一个特定的名字，这个名字可以是任意的字符串，相同的名字的两个标签页之间就可以进行通信。

// pageA.html
// 监听消息
var channel = new BroadcastChannel('my-channel');

channel.onmessage = function(event) {
    console.log(event.data); // 接收到消息
};

// 发送消息
channel.postMessage("hello world"); // 发送消息给其他标签页


// pageB.html
//监听消息
var channel = new BroadcastChannel("my-channel");

channel.onmessage = function(event){
    console.log(event.data); // 接收到消息
};
// 发送消息
channel.postMessage("hello world"); // 发送消息给其他标签页

broadCastChannel 有两个常用的方法：onmessage和 postmessage,分别用来接受和传递消息。

案例

设置页面和渲染页面分开

渲染页面

let channel = new BroadcastChannel('channel');

let rect = document.getElementById('rect');

channel.onmessage = function(event) {
    console.log('message');
    const {type, value} = event.data;
    if(isNaN(value)){
        rect.style[type] = value;
    }else{
        rect.style[type] = value + 'px';
    }
}

设置页面

let channel = new BroadcastChannel('channel');

const width = document.getElementById('width');

const height = document.getElementById('height');

const color = document.getElementById('color');

width.addEventListener('change', () => {
    channel.postMessage({
        type:'width',
        value: width.value
    })
})

height.addEventListener('change', () => {
    channel.postMessage({
        type:'height',
        value:height.value
    })
})

color.addEventListener('change', () => {
    channel.postMessage({
        type:'background',
        value:color.value
    })
})

其他页面通信方式

window.opener

window.opener 是一个指向打开当前窗口的父窗口的引用的属性。

当一个窗口通过 window.open() 方法打开另一个窗口时，被打开的子窗口可以通过 window.opener 属性来引用打开它的父窗口。

通过 window.opener，子窗口可以与父窗口进行通信，例如在子窗口中可以调用父窗口的方法或者访问父窗口的属性。

这种机制在一些特定的场景下非常有用，比如实现单点登录、弹出窗口与主窗口之间的数据传递等。

需要注意的是，由于安全性考虑，跨域窗口之间的通信通常是受限的。

父窗口和子窗口必须属于同一个源（origin），否则访问会受到同源策略的限制。

postMessage

对于 postMessage，我们最常用的方式应该就是当前页面和 iframe 的跨域消息通信了。

其实它也能完成跨窗口通信，核心就是能拿到新窗口的 window 对象，这个在 window.opener 方案中我们就知道通过设置 rel="opener" 就可以办到。

MessageChannel

MessageChannel 是一个用于在不同的 JavaScript 上下文之间安全传递消息的 API。

它允许在两个不同的 Window 或 Worker 之间建立一个通信管道，以便它们可以安全地交换数据，而不必担心跨域或安全性问题。

MessageChannel 主要包含两个主要属性：port1 和 port2，这两个端口可以用来在两个不同的上下文之间发送和接收消息。

通过 postMessage() 方法，可以在这两个端口之间传递数据。

示例如下：

// 在第一个 window 中
const channel = new MessageChannel();

channel.port1.onmessage = function(event) {
    console.log("Received message in window 1:",event.data);
}

// 将 port2 发送给第二个 Window
const otherWindow = window.open('otherWindow.html');

otherWindow.postMessage("hello from window1!","*",[channel.part2]);

// 在第二个 window 中（otherWindow.html）
window.onmessage = function(event){
    const channel = event.ports[0];
    
    channel.onmessage = function(event) {
        console.log("Received message in Window2:",event.data);
    }
    
    // 发送消息回第一个 Window
    channel.postMessage("hello from window 2");
}

storage 事件

storage 事件是一个在浏览器的 localStorage 或 sessionStorage 对象被修改时触发的事件。当一个页面修改了 localStorage 或 sessionStorage 中的数据时，其他同源页面可以通过监听 storage 事件来获取到这些变化，从而实现跨标签页通信。

// 监听 storage 事件

window.addEventListener('storage', function(event){
    console.log(event.key,event.oldValue,event.newValue);
});

// 在页面 A 中修改 localStorage
localStorage.setItem("key","value");

storage 事件的一些限制包括：

同源限制：storage 事件只在同源页面之间有效，即只有在相同协议、主机和端口的页面之间才能触发 storage 事件。

触发顺序：当一个页面修改了 localStorage 或 sessionStorage 数据时，会触发 storage 事件。但需要注意的是，如果同一页面同时修改了数据并监听了 storage 事件，事件会在数据修改之后才被触发，这意味着同一页面内的修改不会立即触发 storage 事件。

存储容量限制：localStorage 和 sessionStorage 的存储容量是有限的，不同浏览器对存储容量的限制可能不同。当存储空间达到上限时，可能会导致数据无法正常存储或触发 storage 事件。

SharedWorker

SharedWorker 是一个可以被多个浏览上下文（例如多个窗口、标签页或者框架）共享的 Web Worker。

与普通的 Web Worker 不同，SharedWorker 可以被多个浏览上下文共同使用，从而实现跨标签页或跨窗口的通信和共享数据。

SharedWorker 可以通过一个共享的端口（port）与多个浏览上下文进行通信，这使得多个浏览上下文可以共享相同的计算资源和数据，从而提高性能和效率。

// 创建 SharedWorker

const worker = new SharedWorker('sharedWorder.js');

// 监听来自 SharedWorker 的消息
worder.port.onmessage = function(event) {
    console.log("Received message from SharedWorder:", event.data);
}

// 向 SharedWorker 发送消息

worker.port.postMessage("hello from main window");

sharedWorder.js

self.onconnect = function(event){
    const port = event.ports[0];
    
    port.onmessage = function(event) {
        console.log("Received message in SharedWorker:" , event.data);
        
        // 向主窗口发送消息
        port.postMessage("Hello from SharedWorker");
    }
}

总结

除了上述方式之外，还可以借助服务器来实现，例如 websocket。

总的来说，跨页面通信的方式还是挺多的，具体选择还是看实际需求。

– 欢迎点赞、关注、转发、收藏【我码玄黄】，各大平台同名。