返回
postMessage的另类玩法，与iframe间通信的新姿势
前端
2023-09-26 23:41:52
在前端开发中，消息通信是不可或缺的一部分。除了常见的 HTTP 通信和 WebSocket 通信，postMessage也逐渐成为一种主流的跨域消息通信手段。本文将聚焦于postMessage在iframe与父页面之间的另类玩法，揭示一种新颖的通信姿势，让跨域消息传递更加轻松和灵活。
iframe与postMessage
iframe（inline frame）是一种嵌入式HTML元素，允许在一个网页中嵌入另一个网页或文档。在iframe中，嵌入的网页可以拥有自己的独立DOM、CSS和JavaScript环境，与主页面相隔离。
postMessage是HTML5中引入的一个方法，允许不同窗口或iframe之间进行消息传递。它提供了一种跨域通信的机制，即使消息的源和目标不在同一个域下。
传统的postMessage通信
在传统的postMessage通信中，父页面和iframe子页面通过以下步骤进行消息传递：
- 父页面使用postMessage方法向iframe子页面发送消息：
iframe.contentWindow.postMessage("Hello from parent page!", "*");
- iframe子页面使用addEventListener方法监听message事件，并接收消息：
window.addEventListener("message", function(event) {
console.log("Received message from parent page:", event.data);
});
这种传统的postMessage通信方式简单易用，但存在一些局限性：
- 只能单向通信： 父页面只能向iframe子页面发送消息，而子页面无法主动向父页面发送消息。
- 消息来源不明确： 父页面无法确定收到的消息是否来自特定的iframe子页面。
另类postMessage通信姿势
为了克服这些局限性，我们可以采用一种另类的postMessage通信姿势：
- 父页面创建一个iframe，并为其指定一个唯一的名称，例如 "my-iframe"：
<iframe id="my-iframe" src="child-page.html"></iframe>
- 在iframe子页面中，使用postMessage方法向父页面发送消息，并指定父页面的名称作为消息目标：
parent.postMessage("Hello from child page!", "*");
- 在父页面中，使用addEventListener方法监听message事件，并根据收到的消息来源（event.source）判断消息来自哪个iframe子页面：
window.addEventListener("message", function(event) {
if (event.source === document.getElementById("my-iframe")) {
console.log("Received message from iframe:", event.data);
}
});
这种另类姿势具有以下优点：
- 双向通信： iframe子页面可以主动向父页面发送消息，实现双向通信。
- 消息来源明确： 父页面可以通过event.source属性判断收到的消息来自哪个iframe子页面，提高了消息的可信度。
实战应用
这种另类postMessage通信姿势可以在以下场景中发挥作用：
- 父子页面数据共享： 父页面和iframe子页面可以共享数据，例如表单数据、购物车信息等。
- 跨域事件触发： iframe子页面可以触发父页面的事件，例如登录成功、表单提交等。
- 跨域调试： 父页面可以向iframe子页面发送调试信息，方便调试和定位问题。
注意事项
使用这种另类postMessage通信姿势时，需要注意以下几点：
- 安全性： 确保iframe子页面来自受信任的来源，以防止恶意代码通过postMessage窃取数据或执行攻击。
- 效率： postMessage通信可能会有一些性能开销，在频繁发送大数据量消息时需要注意优化。
- 兼容性： postMessage方法在IE8及以下版本中不受支持，需要兼容性考虑。
结语
postMessage在iframe与父页面之间的消息通信中具有独特的优势。通过采用另类的postMessage通信姿势，我们可以突破传统通信方式的局限，实现双向通信、明确消息来源，为跨域消息传递提供了更灵活和实用的解决方案。
