postMessage api用于iframe的跨域通信，
发送方需要使用：（接收方iframe）.postMessage(data，“*”)；
接收方需要：第一：事件函数，就是接收到消息之后的回调
第二：绑定监听事件
<!DOCTYPE html>
<html>
<head>
<title>HTML5</title>
</head>
<script type="text/javascript">
var url1 = 'http://login1.qingdao.gov.cn/TestCSS/test/testDiffDomainOfIframe/iframe1.html';
var url0 = 'http://login2.qingdao.gov.cn/TestCSS/test/testDiffDomainOfIframe/iframe0.html';
var iframeWidth = 300;
var iframeHeight = 200;
var frameborder = 1;
window.onload = function() {
// check if HTML5 cross document 'postMessage' is supported
if (typeof window.postMessage == 'undefined') {
var div = document.createElement('div');
div.innerHTML = 'Sorry your browser does not support the ' +
'<a href="http://www.whatwg.org/specs/web-apps/current-work/#crossDocumentMessages">HTML5 Cross-Document Messaging.</a>' +
'<br>Please use Firefox 3 or IE8.';
document.body.innerHTML = '';
document.body.appendChild(div);
return;
}
buildIframes();
};
function buildIframes() {
var iframe1 = document.createElement('iframe');
iframe1.src = url0;
iframe1.width = iframeWidth;
iframe1.height = iframeHeight;
iframe1.frameborder = frameborder;
iframe1.style.border = 'solid black 1px;';
var iframe2 = document.createElement('iframe');
iframe2.src = url1;
iframe2.width = iframeWidth;
iframe2.height = iframeHeight;
iframe2.frameborder = frameborder;
iframe2.style.border = 'solid black 1px;';
document.body.appendChild(iframe1);
document.body.appendChild(iframe2);
}
</script>
<style>
body {
font-size: 14px;
color: red;
}
</style>
<body>
* Move your mouse over iframe0:
0--->1
<html>
<head>
<title>HTML5</title>
</head>
<script type="text/javascript">
var url1 = 'http://login1.qingdao.gov.cn/TestCSS/test/testDiffDomainOfIframe/iframe1.html';
var url0 = 'http://login2.qingdao.gov.cn/TestCSS/test/testDiffDomainOfIframe/iframe0.html';
var iframeWidth = 300;
var iframeHeight = 200;
var frameborder = 1;
window.onload = function() {
// check if HTML5 cross document 'postMessage' is supported
if (typeof window.postMessage == 'undefined') {
var div = document.createElement('div');
div.innerHTML = 'Sorry your browser does not support the ' +
'<a href="http://www.whatwg.org/specs/web-apps/current-work/#crossDocumentMessages">HTML5 Cross-Document Messaging.</a>' +
'<br>Please use Firefox 3 or IE8.';
document.body.innerHTML = '';
document.body.appendChild(div);
return;
}
buildIframes();
};
function buildIframes() {
var iframe1 = document.createElement('iframe');
iframe1.src = url0;
iframe1.width = iframeWidth;
iframe1.height = iframeHeight;
iframe1.frameborder = frameborder;
iframe1.style.border = 'solid black 1px;';
var iframe2 = document.createElement('iframe');
iframe2.src = url1;
iframe2.width = iframeWidth;
iframe2.height = iframeHeight;
iframe2.frameborder = frameborder;
iframe2.style.border = 'solid black 1px;';
document.body.appendChild(iframe1);
document.body.appendChild(iframe2);
}
</script>
<style>
body {
font-size: 14px;
color: red;
}
</style>
<body>
* Move your mouse over iframe0:
0--->1
iframe1.html 写道
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
</head>
<style>
body {
font-size: 12px;
color: gray;
}
</style>
<script type="text/javascript">
window.onload = function() {
document.getElementById('title').innerHTML = 'Domain: ' + document.location.host;
//iframe1事件函数，addEventListener或者是attachEvent，里面的函数就是监听到之后处理函数---》事件函数
var onmessage = function(e) {
var data = e.data;
var origin = e.origin;
document.getElementById('display').innerHTML = data;
};
//监听绑定
if (typeof window.addEventListener != 'undefined') {
window.addEventListener('message', onmessage, false);
} else if (typeof window.attachEvent != 'undefined') {
window.attachEvent('onmessage', onmessage);
}
/***
Mozilla中：
target.addEventListener(type, listener, useCapture)的使用方式：
target.addEventListener(type, listener, useCapture);
type： 字符串，事件名称，？？不含？？“on”，比如“click”、“mouseover”、“keydown”等。
listener ：实现了 EventListener 接口或者是 JavaScript 中的函数。
useCapture ：是否使用捕捉，一般用 false 。例如：document.getElementById("testText").addEventListener("keydown", function (event) { alert(event.keyCode); }, false);
IE中：
target.target.attachEvent(type, listener)的使用方式：
target.attachEvent(type, listener);
target： 文档节点、document、window 或 XMLHttpRequest。
type： 字符串，事件名称，？？含“on”？？，比如“onclick”、“onmouseover”、“onkeydown”等。
listener ：实现了 EventListener 接口或者是 JavaScript 中的函数。 例如：document.getElementById("txt").attachEvent("onclick",function(event){alert(event.keyCode);});
*/
};
</script>
<body>
<div id="title"></div>
<br>
<div id="display"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
</head>
<style>
body {
font-size: 12px;
color: gray;
}
</style>
<script type="text/javascript">
window.onload = function() {
document.getElementById('title').innerHTML = 'Domain: ' + document.location.host;
//iframe1事件函数，addEventListener或者是attachEvent，里面的函数就是监听到之后处理函数---》事件函数
var onmessage = function(e) {
var data = e.data;
var origin = e.origin;
document.getElementById('display').innerHTML = data;
};
//监听绑定
if (typeof window.addEventListener != 'undefined') {
window.addEventListener('message', onmessage, false);
} else if (typeof window.attachEvent != 'undefined') {
window.attachEvent('onmessage', onmessage);
}
/***
Mozilla中：
target.addEventListener(type, listener, useCapture)的使用方式：
target.addEventListener(type, listener, useCapture);
type： 字符串，事件名称，？？不含？？“on”，比如“click”、“mouseover”、“keydown”等。
listener ：实现了 EventListener 接口或者是 JavaScript 中的函数。
useCapture ：是否使用捕捉，一般用 false 。例如：document.getElementById("testText").addEventListener("keydown", function (event) { alert(event.keyCode); }, false);
IE中：
target.target.attachEvent(type, listener)的使用方式：
target.attachEvent(type, listener);
target： 文档节点、document、window 或 XMLHttpRequest。
type： 字符串，事件名称，？？含“on”？？，比如“onclick”、“onmouseover”、“onkeydown”等。
listener ：实现了 EventListener 接口或者是 JavaScript 中的函数。 例如：document.getElementById("txt").attachEvent("onclick",function(event){alert(event.keyCode);});
*/
};
</script>
<body>
<div id="title"></div>
<br>
<div id="display"></div>
</body>
</html>
iframe0.html 写道
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
</head>
<style>
body {
font-size: 12px;
color: gray;
}
</style>
<script type="text/javascript">
window.onload = function() {
document.getElementById('title').innerHTML = 'Domain: ' + document.location.host;
window.document.onmousemove = function(e) {
var x = (window.Event) ? e.pageX : window.event.clientX;
var y = (window.Event) ? e.pageY : window.event.clientY;
window.parent.frames[1].postMessage('x = ' + x + ' y = ' + y, '*'); //.postMessage是发送消息给谁，例如，iframe0发送，iframe1接受，所以iframe1.postMessage()
};
};
</script>
<body>
<div id="title"></div>
<br>
<div id="display"></div>
</body>
</html>
<br><br>
</body>
</html>
<html>
<head>
<title>Untitled</title>
</head>
<style>
body {
font-size: 12px;
color: gray;
}
</style>
<script type="text/javascript">
window.onload = function() {
document.getElementById('title').innerHTML = 'Domain: ' + document.location.host;
window.document.onmousemove = function(e) {
var x = (window.Event) ? e.pageX : window.event.clientX;
var y = (window.Event) ? e.pageY : window.event.clientY;
window.parent.frames[1].postMessage('x = ' + x + ' y = ' + y, '*'); //.postMessage是发送消息给谁，例如，iframe0发送，iframe1接受，所以iframe1.postMessage()
};
};
</script>
<body>
<div id="title"></div>
<br>
<div id="display"></div>
</body>
</html>
<br><br>
</body>
</html>
相关推荐
NULL 博文链接：https://tiger-passion.iteye.com/blog/1111395
html5 API postMessage跨域详解.pdf
html5 API postMessage 实现消息跨域推送
练习说明：使用postMessage可以在iFrame、父子窗口、跨页面等，之间相互传递消息。 你好，我是TKCB-GO，一个有着游戏策划梦想，却沦为程序员的游戏家，这是我的技术博客：www.tkcb.cc 技术博客网站里面，除了我的...
估计很少人知道HTML5 APIS里有一个window.postMessage API。window.postMessage的功能是允许程序员跨域在两个窗口/frames间发送数据信息。基本上，它就像是跨域的AJAX，但不是浏览器跟服务器之间交互，而是在两个...
HTML5 postMessage+iframe实现文件跨域异步上传 http://blog.csdn.net/jiangsyace/article/details/43858443
html5 postMessage解决跨域、跨窗口消息传递 这也是html5另一个API——web workers传递消息的方法
本文介绍了详解html5 postMessage解决跨域通信的问题，分享给大家，具体如下： 效果图 postmessage解析HTML5提供了新型机制PostMessage实现安全的跨源通信. 语法 otherWindow.postMessage(message, targetOrigin, ...
NULL 博文链接：https://weistar.iteye.com/blog/1845314
window.postMessage虽然说是html5的功能，但是支持IE8+，假如你的网站不需要支持IE6和IE7，那么可以使用window.postMessage。关于window.postMessage，很多朋友说他可以支持跨域，不错，window.postMessage是客户端...
针对这些令人头疼的跨域问题，html5特地推出新功能–postMessage(跨文档消息传输)。postMessage在使用时，需要传入2个参数，data和originUrl。data是指需要传递的内容，但是部分浏览器只能处理字符串参数，所以我们...
本篇将详细阐述HTML5 window.postMessage，借助postMessage API，文档间可以以安全可控的方式实现跨域通信，第三方JavaScript代码也可以与iframe内加载的外部文档进行通信。 HTML5 window.postMessage API HTML5 ...
window.postMessage（）方法可以安全地启用对象之间的跨域通信。 例如，在页面与其产生的弹出窗口之间，或在页面与嵌入其中的iframe之间。 通常，只有并且当它们源自的页面共享相同的协议，端口号和主机时，才允许...
postMessage()方法允许来自不同源的脚本采用异步方式进行有限的通信，可以实现跨文本档、多窗口、跨域消息传递。 postMessage(data,origin)方法接受两个参数 1.data:要传递的数据，html5规范中提到该参数可以是Jav
主要为大家详细介绍了利用HTML5里的window.postMessage在两个网页间传递数据的相关资料，postMessage API的功能是可以让你在两个浏览器窗口或iframe之间传递信息数据，对postMessage感兴趣的小伙伴们可以参考一下
主要介绍了Html5 postMessage实现跨域消息传递的相关资料,需要的朋友可以参考下
这里首先想到就是把h5页面用iframe内嵌到pc网页中，然后pc通过postMessage方法，把变化的数据发送给iframe，iframe内嵌的h5通过addEventListener接收数据，再对数据做响应式的变化。 这里总结一下postMessage的使用...