39,082
社区成员
发帖
与我相关
我的任务
分享HTML5 中的 postMessage 功能。
在HTML5 中，使用postMessage 来实现两个不同源文档间的通讯。
这两个文档必须是在同一个窗口吗？
下面写的简单的两个文件间的通讯，但是调试窗口提示
在 'DOMWindow' 上执行 'postMessage' 失败：提供的目标源 ('http://192.168.253.133:8080') 与接收者窗口的源 ('http://192.168.253.131:8080') 不匹配。
使用的是虚拟机建的两个Tomcat服务器。
widthPage.html 文件放在 http://192.168.253.133的服务器上
postPage.html 文件放在 http://192.168.253.131的服务器上
这两个文档必须是在同一个窗口吗？
下面写的简单的两个文件间的通讯，但是调试窗口提示
在 'DOMWindow' 上执行 'postMessage' 失败：提供的目标源 ('http://192.168.253.133:8080') 与接收者窗口的源 ('http://192.168.253.131:8080') 不匹配。
使用的是虚拟机建的两个Tomcat服务器。
widthPage.html 文件放在 http://192.168.253.133的服务器上
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>widthPage</title>
</head>
<body>
<div>接受到的消息:
<strong id="message"></strong>
</div>
<div>
<iframe src="http://192.168.253.131:8080/ch01/postPage.html" />
</div>
<script>
window.addEventListener("message", proMessage);
function proMessage(message) {
alert(message.data);
if (message.origin == "http://192.168.253.131:8080") {
document.getElementById("message").textContent = message.data;
window.top.postMessage("收到", "http://192.168.253.131:8080");
}
}</script>
</body>
</html>
postPage.html 文件放在 http://192.168.253.131的服务器上
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>postPage</title>
</head>
<body>
<input type="text" id="textMessage" />
<input type="button" id="sendbtn" value="Send" />
<strong id="message"></strong>
<script>
window.addEventListener("message", proMessage);
function proMessage(message) {
if (message.origin == "http://192.168.253.133:8080") {
document.getElementById("message").textContent = message.data;
}
}
document.getElementById("sendbtn").addEventListener("click", function () {
window.postMessage(document.getElementById("textMessage").value, "http://192.168.253.133:8080");
})
</script>
</body>
</html>
...全文
请发表友善的回复…
发表回复
孟子E章 2017-12-18
- 打赏
- 举报
window.top.postMessage使用错了吧
window.top.postMessage应该写在iframe里面的那个页面中
参考
http://blog.csdn.net/szu_aker/article/details/52314817
