知识问答
如何实现HTML5中的跨文档消息传输？
2025-09-22 01:39:27
来源：互联网转载
HTML5 跨文档消息传输通过
window.postMessage 方法实现，允许不同源的窗口或iframe之间安全地传递数据。HTML5 跨文档消息传输的基本原理
HTML5 提供了一种在不同文档（包括不同域）之间进行安全通信的方法，称为跨文档消息传输（Crossdocument Messaging），有时也简称为 XDM，这一机制的核心是postMessage 方法，它允许网页通过向其他窗口发送消息来实现跨文档通信。
核心方法：postMessage
postMessage 方法接收两个主要参数：
1、message: 要传递的消息内容，通常为字符串，如果需要传递复杂数据结构，建议使用 JSON 格式。
2、targetOrigin: 指定接收消息的窗口来源，确保消息只发送到预期的接收方，避免安全隐患。
otherWindow.postMessage(message, targetOrigin);
消息接收与处理
当一个窗口收到来自其他窗口的消息时，会触发message 事件，可以通过**message 事件来接收和处理这些消息：
window.addEventListener("message", function(event) { // 确保消息来源可靠 if (event.origin !== "http://trusted.com") { return; // 忽略不可信来源的消息 } // 处理消息 console.log("Received message:", event.data);});示例代码
以下是一个简单的跨文档消息传输示例，包含一个主页面和一个嵌套在iframe 中的子页面：
主页面 (home.html)
<!DOCTYPE html><html><head> <meta charset="utf8"> <title>跨文档消息传输示例</title></head><body><iframe src="msg.html" width="400" height="400" onload="sendMsg();" id="iframe"></iframe><p id="p1"></p><ｓｃｒｉｐｔ type="text/javascript"> window.addEventListener("message", function(event) { document.getElementById('p1').innerHTML = '从 ' + event.origin + ' 来的消息: ' + event.data; }); // 向 iframe 内嵌框架中发送一条消息 function sendMsg() { var iframeWindow = document.getElementById("iframe").contentWindow; var information = {"张三":10,"李四":20,"王五":30}; var jsontext = JSON.stringify(information); setTimeout(function() { iframeWindow.postMessage(jsontext, "http://localhost:8080/test/msg.html"); }, 2000); }</ｓｃｒｉｐｔ></body></html>子页面 (msg.html)
<!DOCTYPE html><html><head> <meta charset="utf8"> <title>子页面</title></head><body><p id="p2"></p><ｓｃｒｉｐｔ type="text/javascript"> window.addEventListener("message", function(event) { if (event.origin !== "http://localhost:8080") { return; // 忽略不可信来源的消息 } var data = JSON.parse(event.data); for (var key in data) { document.getElementById('p2').innerHTML += key + ': ' + data[key] + '<br>'; } // 向来源窗口发送回执消息 event.source.postMessage("消息已收到", event.origin); });</ｓｃｒｉｐｔ></body></html>FAQs
问题1：跨文档消息传输是否只能在同一个域内进行？
不是的，跨文档消息传输不仅可以在同一个域内进行，也可以在不同的域之间进行，为了确保安全性，必须在发送消息时指定targetOrigin 参数，以确保消息只会被目标窗口接收。
问题2：如何确保跨文档消息传输的安全性？
确保跨文档消息传输的安全性需要注意以下几点：
1、验证消息来源：在接收消息时，通过检查event.origin 属性来确认消息的来源是否可信。
2、指定接收方：在发送消息时，通过设置postMessage 方法的targetOrigin 参数来限制消息的接收方，避免将消息发送到不可信的来源。
