网页通讯多标签通讯通过localstorage通讯 A和B页面必须同域, 因为localstorage也是跨域不共享

多标签通讯

通过localstorage通讯

A和B页面必须同域, 因为localstorage也是跨域不共享
A页面设置localStorage
B页面可以监听到localstorage的修改

页面A

localstorage.setItem('userId', 'u234234')

页面B: 监听localstorage的变化

window.addEventListener('storage', (event) => {
    console.info(event.key)
    console.info(event.newValue)    
})

ShareWorker

可单独开启一个进程, 用于同域页面通讯

worker.js

const set = new Set()

onconenct = e => {
    const port = e.ports[0]
    set.add(port)
    
    // 接受到消息, 就把消息广播出去
    port.onmessage = e => {
        set.forEach(p => p.postMessage(e.date))
    }
    
    // 链接成功发送消息
    port.postMessage('worker.js done')
}

页面A

const worker = new SharedWorker(./worker.js)

worker.port.onmessage = e => console.log(e.data)

页面b

const worker = new SharedWorker(./worker.js)

const btn = document.getElementById('btn1')
btn.addEventListener('click', () => {
    console.log('clicked')
    worker.port.postMessage('xxx...')
})

iframe通讯

父页面向 iframe 发送消息

iframe.contentWindow.postMessage(
  { type: 'UPDATE', data: 'Hello' }, 
  'https://child.com' // 目标域名
);

iframe 接收并回复：

window.addEventListener('message', (event) => {
  if (event.origin !== 'https://parent.com') return; // 验证来源
  if (event.data.type === 'UPDATE') {
    event.source.postMessage('Received!', event.origin); // 回复
  }
});