利用postMessage实现HTML父子页面iframe跨域双向通信示例

在IT开发中，当遇到主页面（通常在`http://a.com/main.html`）嵌套子页面（`http://b.com/iframepage.html`）且需要实现父子页面之间的双向通信时，postMessage方法是解决跨域通信问题的有效工具。postMessage方法允许不同源的脚本进行异步通信，支持跨文本文档、多窗口和跨域消息传递。 以下是详细的实现步骤和关键代码： **1. 知识理论准备** - **postMessage方法**：这是HTML5提供的API，它允许在不同源的页面之间安全地发送数据，通过在`otherWindow`对象上调用`postMessage`方法，向目标窗口发送数据。这个方法支持跨域通信，但只有同源策略允许的情况下才能进行。 **2. 页面结构与脚本** - 主页面（main.html）： - 使用`<iframe>`标签嵌入子页面（iframepage.html），设置其id为"child"，src属性指向子页面URL。 - 在主页面中，创建一个区域来显示从子页面接收到的消息，通过`<span>`标签的id为"message"。 **3. postMessage方法使用示例** - 在主页面的JavaScript中，我们监听`window`对象的`message`事件，以便在接收到子页面发送的消息时作出响应： ```javascript window.addEventListener("message", function(event) { if (event.origin !== "http://b.com") return; // 检查是否来自预期源 document.getElementById("message").innerText = event.data; // 显示接收到的消息 }); ``` - 子页面（iframepage.html）中，当需要向主页面发送消息时，使用`postMessage`方法： ```javascript var parentWindow = window.top || window.parent; // 获取父窗口 parentWindow.postMessage("从子页面发送的消息", "http://a.com"); // 发送消息，指定目标源 ``` **4. 注意事项** - `targetOrigin`参数用于指定接受消息的窗口，可以设置为"*"表示任何源，也可以是具体的URL。 - `transfer`参数通常用于传递复杂对象，如Blob或ImageData，但在这个示例中并未使用。 **5. 操作流程总结** - 主页面创建并监听message事件，等待子页面消息。 - 子页面在适当的时候，使用`postMessage`发送数据给父页面，数据会被包裹在一个MessageEvent对象中。 - 父页面捕获到MessageEvent后，提取数据并显示在指定区域。 通过以上步骤，你就可以实现在HTML父子页面嵌套的iframe中，通过postMessage实现双向通信了。这种技术尤其适用于在同源策略限制下的场景，如浏览器扩展、Web应用间的通信等。