Communication between browser windows

1. Summary

Insert image description here

2. Same-origin strategy

Insert image description here

3. webSocket (no cross-domain restrictions)

Advantages: No cross-domain restrictions
Disadvantages: High cost
Insert image description here

4. Client Storage

1、localStorage + onStorage

Insert image description here
Insert image description here

example:
Insert image description here

Insert image description here

2. Timer + client storage

Insert image description here

example:
Insert image description here
Insert image description here

Insert image description here

shortcoming:
Insert image description here

5. postMessage (no cross-domain restrictions)

Insert image description here

Example:
Insert image description here
index.html

<body>
    <div>
        <iframe src="./ifr.html" id="ifr" style="width:600px; height:300px"></iframe>
    </div>

    主窗口
    
    <div>
        <div>Message:</div>
        <div id="messages"></div>
    </div>
    <script>
        window.addEventListener("message", function (event) {
      
      
            messages.innerHTML += `
                <div>${ 
        event.data}</div>  
            `
        })

        setInterval(() => {
      
      
            ifr.contentWindow.postMessage(`message from index.html, ${ 
        Date.now()}`)
        }, 5000)
    </script>
</body>

ifr.html

<body>
    iframe窗口
    <div>
        <div>Message:</div>
        <div id="messages"></div>
    </div>
    <script>
        window.addEventListener("message", function (event) {
      
      
            messages.innerHTML += `
                <div>${ 
        event.data}</div>  
            `
        })

        setInterval(()=> {
      
      
            window.parent.postMessage(`message from ifr.html, ${ 
        Date.now()}`)
        }, 5000)

    </script>
</body>

6. Broadcast Channel event broadcasting is super easy to use! ! !

  • Allows different documents under different browser windows, tab pages, frames or iframes from the same origin to communicate with each other
  • Disadvantages: Same-origin strategy

Core code:
Insert image description here

example:
Insert image description here

<body>
    <section>
      <iframe src="./page1.html"></iframe>
      <iframe src="./page2.html"></iframe>
    </section>
  </body>
<body>
  <h3>Page 1</h3>
  
  <section style="margin-top:50px; text-align: center">
    <input id="inputMessage" value="page 1的测试消息" />
    <input type="button" value="发送消息" id="btnSend" />
    <section id="messages">
      <p>收到的消息:</p>
    </section>
  </section>

  <script>
    var messagesEle = document.getElementById("messages")
    var messageEl = document.getElementById("inputMessage")
    var btnSend = document.getElementById("btnSend")
    
    var channel = new BroadcastChannel("channel-BroadcastChannel")
    channel.addEventListener("message", function (ev) {
      
      
      var msgEl = document.createElement("p")
      msgEl.innerText =
        ev.data.date + " " + ev.data.from + ":" + ev.data.message
      messagesEle.appendChild(msgEl)
    })

    btnSend.addEventListener("click", function () {
      
      
      var message = messageEl.value
      channel.postMessage({
      
      
        date: new Date().toLocaleString(),
        message,
        from: "page 1"
      })
    })
  </script>
</body>
  <body>
    <h3>Page 2</h3>

    <section style="margin-top:50px; text-align: center">
      <input id="inputMessage" value="page 2的测试消息" />
      <input type="button" value="发送消息" id="btnSend" />
      <section id="messages">
        <p>收到的消息:</p>
      </section>
    </section>

    <script>
      var messagesEle = document.getElementById("messages")
      var messageEl = document.getElementById("inputMessage")
      var btnSend = document.getElementById("btnSend")
      
      var channel = new BroadcastChannel("channel-BroadcastChannel")
      channel.addEventListener("message", function(ev) {
      
      
        var msgEl = document.createElement("p")
        msgEl.innerText = ev.data.date + " " + ev.data.from + ":" + ev.data.message
        messagesEle.appendChild(msgEl)
      })

      btnSend.addEventListener("click", function() {
      
      
        var message = messageEl.value
        channel.postMessage({
      
      
          date: new Date().toLocaleString(),

          message,
          from: "page 2"
        })
      })
    </script>
  </body>

Seven: MessageChannel (no cross-domain restrictions)

  • Channel MessagingThe API MessageChannelinterface allows us to create a new message channel and send data through its two MessagePort properties
  • Disadvantages: Need to create a contact first

Core code:
Insert image description here

example:
Insert image description here

<body>
    <iframe id="ifr" src="./ifr.html" style="width:600px; height:300px"></iframe>

    <div>主窗口</div>

    <div>
        <div>Message:</div>
        <div id="messages"></div>
    </div>

    <script>
        const channel = new MessageChannel()

        var ifr = document.querySelector('iframe')

        ifr.onload = function () {
      
      
            ifr.contentWindow.postMessage('__init__', '*', [channel.port2])
        }
        // 监听消息
        channel.port1.onmessage = onMessage
        function onMessage(e) {
      
      
            messages.innerHTML += `
                <div>${ 
        event.data}</div>  
            `
        }
        // 轮询发送
        setInterval(function(){
      
      
            channel.port1.postMessage(`message from index.html, ${ 
        Date.now()}`)
        }, 5000)


    </script>
</body>
<body>
    iframe窗口
    <div>
        <div>Message:</div>
        <div id="messages"></div>
    </div>
    <script>
        window.addEventListener("message", function (event) {
      
      
            if (event.data === "__init__") {
      
      
                initChannel( event.ports[0])
            }
        })
        function initChannel(port) {
      
      
            port.onmessage = function (event) {
      
      
                messages.innerHTML += `
                <div>${ 
        event.data}</div>  
            `
                port.postMessage(`message from the iframe, ${ 
        Date.now()}`);
            }
        }
    </script>
</body>

8. SharedWorker

  • SharedWorkerYes Web Worker, a process can be started separately for communication with pages in the same domain.
  • Web WorkerThe child process can be started to execute JS, but the DOM cannot be manipulated.
  • Disadvantages: compatibility, same-origin policy

example:
Insert image description here

Insert image description here
Insert image description here
Insert image description here
Insert image description here

Guess you like

Origin blog.csdn.net/weixin_44582045/article/details/132171143