HTML5 中的 postMessage 功能。

angry_code 2017-12-18 12:37:28
在HTML5 中,使用postMessage 来实现两个不同源文档间的通讯。

这两个文档必须是在同一个窗口吗?

下面写的简单的两个文件间的通讯,但是调试窗口提示

在 '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>
...全文
867 1 打赏 收藏 转发到动态 举报
写回复
用AI写文章
1 条回复
切换为时间正序
请发表友善的回复…
发表回复
孟子E章 2017-12-18
  • 打赏
  • 举报
回复
window.top.postMessage使用错了吧 window.top.postMessage应该写在iframe里面的那个页面中 参考 http://blog.csdn.net/szu_aker/article/details/52314817

39,082

社区成员

发帖
与我相关
我的任务
社区描述
HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准,是构建以及呈现互联网内容的一种语言方式.被认为是互联网的核心技术之一。
社区管理员
  • HTML5社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧