message

2025年01月07日

柏拉文

越努力，越幸运

一、认识

---

**message**事件是在窗口接受到消息（例如，从另一个浏览器上下文中调用 Window.postMessage()）时，在 Window 对象上触发的事件。

二、语法

---

window.addEventListener('message', function(event) { ... })
window.onmessage = function(event) { ... }

• event:

  • data: 从其他 window 中传递过来的对象

  • origin: 调用 postMessage 时消息发送方窗口的 origin

  • source: 对发送消息的窗口对象的引用; 您可以使用此来在具有不同 origin 的两个窗口之间建立双向通信。

三、场景

---

3.1 浏览器两个 Tab

1. A Tab 页面

   Html

   <h2>A 页面</h2>
   <button>跳转 B 页面</button>

   Css

   <div className="box">
   <div className="item"></div>
   </div>

   JavaScript

   const targetOrigin = "http://test.bolawen.com/b.html";
   const button = document.querySelector("button");
     button.addEventListener(
       "click",
       function () {
         const BPage = window.open(targetOrigin,"_blank");
         BPage.addEventListener("load", function () {
           BPage.postMessage("aa", targetOrigin);
         });
       },
       false
     );
   
   function receiveMessage(e) {
       const { data,origin,source} = e;
       if(origin === targetOrigin){
           console.log("A 页面发送数据之后的回调数据",data);
       }
       console.log("A 页面接收的数据",data);
   }
   window.addEventListener("message", receiveMessage, true);

2. B Tab 页面

   Html

   <h2>B 页面</h2>

   Css

   JavaScript

   function receiveMessage(e) {
       const { data, origin, source } = e;
       console.log("B 页面接收到的数据", data);
       source.postMessage("bb", origin);
   }
   window.addEventListener("message", receiveMessage);

3.2 浏览器中 Iframe 通信

1. A 页面

   Html

   <h2>A 页面</h2>
   <iframe src="./b.html"></iframe>

   Css

   JavaScript

   const targetOrigin = "*";
   const iframePage = document.querySelector("iframe[src='./b.html']");
       iframePage.addEventListener("load", function () {
       iframePage.contentWindow.postMessage("aa", targetOrigin);
   });
   
   function receiveMessage(e) {
       const { data, origin, source } = e;
       if (origin === targetOrigin) {
           console.log("A 页面发送数据之后的回调数据", data);
       }
       console.log("A 页面接收的数据", data);
   }
   window.addEventListener("message", receiveMessage, true);

2. B Iframe 页面

   Html

   <h2>B 页面</h2>

   Css

   JavaScript

   function receiveMessage(e) {
       const { data, origin, source } = e;
       console.log("B 页面接收到的数据", data);
       const targetOrigin = origin && origin !== "null" ? origin : "*";
       source.postMessage("bb", targetOrigin);
   }
   window.addEventListener("message", receiveMessage);