JavaScript实现跨标签页通信

Mr_linjw

已于 2023-11-18 11:48:30 修改

阅读量344

点赞数

文章标签： javascript 前端开发语言

于 2023-10-07 09:15:42 首次发布

本文链接：https://blog.csdn.net/Mr_linjw/article/details/133632085

版权

一、localStorage

通过 localStorage 结合 window.addEventListener('storage', cb) 完成 A、B 标签页间通信。

// A标签页
localStorage.setItem('send-msg', JSON.stringify({
    name: 'hzd',
    age: '18',
}))

// B标签页
window.addEventListener('storage', (data) => {
    try {
        console.log(data)
        const msg = JSON.parse(data.newValue)
    } catch (err) {
        // 处理错误
    }
})

二、BroadcastChannel（广播）

BroadcastChannel API 表示一个命名频道，给定来源的任何浏览上下文都可以订阅该频道。它允许同一来源的不同文档（在不同窗口、选项卡、框架或 iframe 中）之间进行通信。

// A页面
const bc = new BroadcastChannel("test_channel");
bc.postMessage("This is a test message.");


// B页面
const bc = new BroadcastChannel("test_channel");
bc.onmessage = (event) => {
  console.log(event);
};

三、postMessage

postMessage 是 H5 引入的 API，该方法允许来自不同源的脚本采用异步方式进行有效的通信，可以实现跨文本文档、多窗口、跨域消息传递，多用于窗口间数据通信，这也使它成为跨域通信的一种有效的解决方案。

// 发送端：
<button id="btn">发送消息</button>
<script>
  let device =     
  window.open('http://localhost:63342/signal_communication/postMessage/receive.html')
  document.getElementById('btn').addEventListener('click', event => {
    device.postMessage('发送一条消息')
  })
</script>

// 接收端：
<script>
  window.addEventListener('message', event => {
    console.log(event)
  })
</script>