跨页面通信跨域实践：Localstorage、MessageChannel、PostMessage

2023-09-22 17:33:26

不同页面通信与跨域早已是前端开发中的老生常谈，相信大家对各种手段都已经滚瓜烂熟了。但如果我们把目光从同一个标签页内或同域内的通信，扩展到跨标签页甚至跨域的场景，又该如何实现呢？本文将结合实际案例，探讨 Localstorage、MessageChannel 和 PostMessage 这三种方法在跨页面通信和跨域中的应用，带你深入理解跨页面通信的奥秘。

相信大家对跨域有什么手段，都背得滚瓜烂熟了。现在我们来做一些不在同一个tab页面或者跨域的实践。

Localstorage

Localstorage是浏览器同域标签共用的存储空间，所以可以用来实现多标签之间的通信。html5出现了一个事件：onstorage，可以监听到本域范围内其他标签对localStorage的操作。

// 监听storage事件
window.addEventListener('storage', function(e) {
  console.log(e.key, e.newValue, e.oldValue);
});

// 发送数据到其他标签
localStorage.setItem('name', '小明');

MessageChannel

MessageChannel 可以用来实现不同标签页之间的通信，它的原理是创建一个消息通道，然后将消息通过这个通道发送到另一个标签页。

// 创建消息通道
const { port1, port2 } = new MessageChannel();

// 监听来自另一个标签页的消息
port1.onmessage = function(e) {
  console.log(e.data);
};

// 发送数据到另一个标签页
port2.postMessage('hello');

PostMessage

PostMessage 可以用来实现跨域通信，它的原理是利用 iframe 或者 window.postMessage() 函数来发送消息。

// 创建一个 iframe，并监听其消息
const iframe = document.createElement('iframe');
iframe.src = 'https://example.com';
iframe.onload = function() {
  iframe.contentWindow.postMessage('hello', '*');
};
iframe.addEventListener('message', function(e) {
  console.log(e.data);
});

// 发送数据到另一个域
window.postMessage('hello', '*');