浏览器跨窗口通信/共享数据

浏览器不同窗口之间共享数据/通信

常用的主要有如下方式:

  • postMessage
  • WebSoket
  • localStorage、sessionStorage
  • BroadcastChannel

1. postMessage

在A窗口通过window.open打开B窗口, 该方法返回一个B窗口的window对象, 通过调用postMessage方法, 发送A窗口中的数据

B窗口通过监听window对象的message事件, 通过e.data来获取A窗口发送过来的数据

另外: postMessage是没有跨域限制的

A页面

<body>
  <h2>这是index01</h2>
  <button class="btnOpen">打开另一个窗口</button>
  <button class="btnPost">发送数据</button>

  <script>
    const btnOpen = document.querySelector('.btnOpen');
    const btnPost = document.querySelector('.btnPost');

    let index02;

    btnOpen.addEventListener('click', () => {
      index02 = window.open('./idnex02.html')
    })

    btnPost.addEventListener('click', () => {
      index02.postMessage({ type: 'popring', message: '来自 index01 的数据' }, '/')
    })
  </script>
</body>

B页面

<body>
  <h2>这是index02</h2>
  <h4 class="text"></h4>
  <script>

    const text = document.querySelector('.text')

    window.addEventListener("message", e => {
      if (e.data.message) {
        text.innerHTML = e.data.message
      }
    })
  </script>
</body>

2. WebSoket

不做演示

3. localStorage、sessionStorage

localStorage不做演示

关于sessionStorage, sessionStorage是会话级别的存储, 且不支持跨标签页共享数据, 但是在相同浏览器下,并且是同源窗口下,通过跳转的页面可以共享sessionStorage的值

A页面

<body>
  <a href="./index02.html">跳转到index02</a>

  <script>
    sessionStorage.setItem('data', '这是存储在sessionStorage中的数据')
  </script>
</body>

B页面

<body>
  <h2>index02</h2>
  <h3 class="text"></h3>
  <script>
    const data = sessionStorage.getItem('data')

    const text = document.querySelector('.text')
    text.innerHTML = data
  </script>
</body>

4. BroadcastChannel

A页面

<body>
  <h2>index01</h2>

  <script>
    // communicate为广播的频道, 发布者和接受者必须处于同一频道
    const bc = new BroadcastChannel('communicate')
    bc.postMessage('这是来自 index01 的数据')
  </script>
</body>

B页面

<body>
  <h2>index02</h2>
  <h3 class="text"></h3>

  <script>
    const text = document.querySelector('.text')
    const bc = new BroadcastChannel('communicate')

    bc.onmessage = e => {
      text.innerHTML = e.data
    }

    bc.onmessage()
  </script>
</body>

posted @ 2022-01-11 18:15  只猫  阅读(1591)  评论(0)  编辑  收藏  举报