Front-end multi-page communication

Original address:
https://juejin.im/post/6844903811232825357

The following notes are only for your own practice

When two pages are of the same origin:

Use BroadcastChannel
to start the web server with the express server first. Then open two express pages in the browser.

<!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 onclick="clickButton()">点击发送消息</div>
  </body>
  <script>
    let bc = new BroadcastChannel("daimian");
    bc.onmessage = function (e) {
     
     
      console.log("这里是接收到的消息：", e.data);
    };
    function clickButton() {
     
     
      console.log("这里点击了按钮");
      bc.postMessage("这里是广播发送的消息");
    }
  </script>
</html>

One page send
Insert picture description here

Another page receives:
Insert picture description here

Monitor locaStorage

Use eventListener to monitor storage

<!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 onclick="clickButton()">点击发送消息</div>
  </body>
  <script>
    window.addEventListener("storage", (e) => {
     
     
      console.log("这里storage进行了变化", e);
    });
    let num = 0;
    function clickButton() {
     
     
      localStorage.setItem("nice", num++);
    }
  </script>
</html>

Insert picture description here

Use indexDB and then perform rotation training
Use serviceWorker to make an information transfer station yourself.

When different sources

Use postMessage and iframe to transfer data across domains.
It should be noted that
targetWindow.postMessage cannot be written directly in the script tag, because the iframe tag is slow to load, so an error will be reported.
Insert picture description here
Therefore, it should be placed in the event and triggered by the event. In this way, the window of the iframe can be obtained after the iframe is loaded, and then the message is sent.

Or you can use setTimeout

parent page, mounted on http://localhost:3000

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>iframe父级页面</title>
    <style>
      * {
     
     
        padding: 0;
        margin: 0;
      }
    </style>
  </head>
  <body>
    <h2>我是父级页面</h2>
    <iframe src="http://localhost:3001" id="myframe"></iframe>
    <script>
      setTimeout(() => {
     
     
        var myframe = document.getElementById("myframe");
        myframe.contentWindow.postMessage("hello", "http://localhost:3001");
      }, 1000);
    </script>
  </body>
</html>

Child page, mounted on http://localhost:3001

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>iframe子页面</title>
  </head>
  <body>
    <h2>我是内嵌的子页面</h2>
    <script>
      window.addEventListener("message", function (e) {
     
     
        console.log("这里是父页面传的值：", e.data);
      });
    </script>
  </body>
</html>

Insert picture description here