跨标签通信

发表于 更新于 分类于 阅读次数： Changyan： 本文字数： 463 阅读时长 ≈ 1 分钟

  1. 本地存储监听

    监听 同源 localStorage 的修改 （如果setItem 的值没变，则不会触发storage事件

    1
    2
    3
    window.onStorage = function(e) {
        console.log(e.data)
    }

  2. BroadcastChannel.postMessage

    同源

    1
    2
    3
    4
    5
    6
    7
    8
    //标签1
    const bc = new BroadcastChannel('common channel') 
    bc.postMessage('hello')
    //标签2
    const bc = new BroadcastChannel('common channel')  
    bc.onmessage = (e)=> {
        console.log(e.data);
    }

  3. 详见 🔗几种postMessage

  4. WebSocket

  5. shared worker
    🔗详见

  6. IndexDB 轮询 / cookie 轮询

  7. window.open 返回一个打开的页面对象，通过window.opener 得到