js MessageChannel 两个独立的窗口双向实时通信

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      const { port1, port2 } = new MessageChannel()

      // 监听port2的消息
      port2.onmessage = (event) => {
        console.log('收到消息:', event.data)
      }

      // 通过port1发送消息
      port1.postMessage('Hello, Channel!')


    </script>
  </body>
</html>

index1.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div>
      <button onclick="handleOpen()">打开新页面</button>
      <button onclick="handleClick()">传递port2</button>
      <button onclick="handleSend()">发消息</button>
    </div>
    <script>
      let channel = new MessageChannel()
      let windowB

      channel.port1.onmessage = (event) => {
        console.log('Message from windowB:', event.data)
      }

      function handleOpen() {
        windowB = window.open('index2.html')
      }

      function handleClick() {
        try {
          windowB.postMessage('init', '*', [channel.port2])
        } catch (error) {
          console.log(error)
          channel = new MessageChannel()
          channel.port1.onmessage = (event) => {
            console.log('Message from windowB:', event.data)
          }

          windowB.postMessage('init', '*', [channel.port2])
        }
      }

      function handleSend() {
        channel.port1.postMessage('666')
      }
    </script>
  </body>
</html>

index2.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div>
      <button onclick="handleSend()">发消息</button>
    </div>
    <script>
      let port2
      // 在接收 postMessage 时，获得 port2
      window.addEventListener('message', (event) => {
        if (event.data === 'init') {
          port2 = event.ports[0]

          port2.onmessage = (event) => {
            console.log('Message from windowA:', event.data)
          }

          port2.postMessage('Hello from windowB')
        }
      })

      function handleSend() {
        port2.postMessage('777')
      }
    </script>
  </body>
</html>

人工智能学习网站

https://chat.xutongbao.top

js MessageChannel 两个独立的窗口双向实时通信

猜你喜欢