前端：用 postMessage 实现 主页面 与 iframe 子页之间的通信（相互传值）

• 作者：刘俊
• Github：ukea

我们在前端开发的过程中，常会用到iframe这个标签页。看似主页面和iframe之间是相互独立的。那么，有没有办法可以让他们俩之间建立连接呢？其实是可行的。

话不多说，SHOW U MY CODE.

iframe页面传递信息给主页面

主页面 [nqdtww-5173.csb.app] ：

<div>
    Parent Page
</div>
<iframe src="https://gyudgy-5173.csb.app/"></iframe>

function msgHandler(e) {
  const { data } = e;
  console.log(e, data);
  if (e.origin === "https://gyudgy-5173.csb.app") {
    return e.data;
  } else {
    return false;
  }
}

function msgListener(e) {
  const msg = msgHandler(e);
  if (msg) {
    alert("监听成功，结果是：" + msg);
  } else {
    console.error("监听失败，什么都没听到");
  }
}

// 添加监听事件
window.addEventListener("message", msgListener, false);

子页面 [gyudgy-5173.csb.app] ：

<div>
    Child Pages
</div>

window.addEventListener("load", () => {
  parent.postMessage("泰裤辣", "https://nqdtww-5173.csb.app/"); // 母页面的域名
});

结果成功啦！

附：CodeSandBox 的 DEMO：

1. 主页面 parent-page：（源码）codesandbox.io/p/sandbox/p… （页面效果）nqdtww-5173.csb.app
2. 子页面 child-page：（源码）codesandbox.io/p/sandbox/c… （页面效果）gyudgy-5173.csb.app

好，那么我们接下来看看，如何将主页面的消息传递给iframe中的子页面呢？

主页面传递信息给iframe页面

注：时间关系，目前先放上代码，后续会补上在线Demo.

主页面传递信息：

const iframe = document.getElementById('iframe').contentWindow;
document.getElementById('blue').addEventListener('click', () => {
    iframe.postMessage('lightskyblue', 'https://iframe.com'); 
});

子页面接收信息：

function receiveMessage(e) {
  if(e.origin !== 'https://main-page.com') {
    return false;
  } else {
    const bgColor = e.data;
    console.log("获取成功", bgColor)
  }
}

window.addEventListener('message', receiveMessage, false);

以上。感谢阅读。 参考文献：

1. letswritetw.github.io/letswrite-p… 或 www.letswrite.tw/postmessage…