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>
相关推荐
HTML5的`postMessage` API是现代Web应用程序中一种强大的通信机制，用于在不同窗口、框架、甚至不同源之间传递消息。这个功能的引入解决了跨文档通信（Cross-document messaging）的问题，尤其是在处理跨域（cross-...
`postMessage`是HTML5引入的一个特性，用于在不同源的窗口之间发送和接收消息。它提供了一种安全的方式来实现跨窗口数据传递，避免了传统方式（如通过URL查询字符串或修改全局变量）可能导致的安全问题。`post...
HTML5的`postMessage` API是为了解决Web应用程序之间的跨域通信问题而引入的。在传统的Web开发中，由于浏览器的同源策略限制，不同源的页面无法直接交互，但`postMessage`提供了一种安全的方式，允许来自不同源的...
HTML5的`postMessage` API是现代Web开发中一个重要的跨窗口通信机制，它允许不同源的脚本之间安全地传递消息，有效地解决了浏览器的安全限制，尤其是跨域问题。在这个场景下，`postMessage`成为了实现消息跨域推送的...
HTML5的`window.postMessage`是解决跨域通信问题的一个重要机制。在Web开发中，由于浏览器的安全策略，不同源的页面之间默认不允许进行数据交互，但`postMessage`提供了一种安全的方式，允许来自不同源的脚本采用...
练习说明：使用postMessage可以在iFrame、父子窗口、跨页面等，之间相互传递消息。 你好，我是TKCB-GO，一个有着游戏策划梦想，却沦为程序员的游戏家，这是我的技术博客：www.tkcb.cc 技术博客网站里面，除了我的...
本篇将重点讲解如何利用HTML5的`postMessage`和`iframe`技术来实现文件的跨域异步上传。 `postMessage`是HTML5中一种强大的通信机制，它允许来自不同源的脚本采用异步方式进行有限的通信，可以解决同源策略带来的...
HTML5引入了一种新的API，即`postMessage`，它为跨域和跨窗口的数据传递提供了解决方案，同时也被用于Web Workers之间的通信。本文将深入探讨`postMessage`的工作原理，以及如何利用它来实现iframe跨域传递数据。 #...
本文介绍了详解html5 postMessage解决跨域通信的问题，分享给大家，具体如下： 效果图 postmessage解析HTML5提供了新型机制PostMessage实现安全的跨源通信. 语法 otherWindow.postMessage(message, targetOrigin, ...
1. `postMessage`：这是HTML5引入的一个特性，用于实现跨文档消息传递。通过`window.postMessage`方法，一个窗口可以向任何其他窗口发送消息，无论它们是否属于同一个源。接收端需要监听`message`事件来接收到的消息...
在HTML5中，`iframe`跨域通信是一个重要的特性，它允许不同的源（域名、协议或端口）之间进行安全的数据交换。`postMessage` API是实现这一功能的关键，为了解决传统`iframe`跨域限制的问题，提供了一种安全且灵活的...
这个API是HTML5引入的，解决了之前跨域安全策略限制下，如iframe、弹窗、多窗口之间无法直接通信的问题。`postMessage` 的核心在于它允许一个文档或窗口向其他任何窗口发送消息，接收方可以监听`message`事件来获取...
估计很少人知道HTML5 APIS里有一个window.postMessage API。window.postMessage的功能是允许程序员跨域在两个窗口/frames间发送数据信息。基本上，它就像是跨域的AJAX，但不是浏览器跟服务器之间交互，而是在两个...
HTML5中的window.postMessage是一个非常重要的API，它允许跨源通信，即在不同域之间进行安全的数据交换。同源策略是浏览器的一种安全机制，限制了不同源之间的交互。postMessage的出现，突破了这一限制，允许页面在...
`postMessage` 是HTML5引入的一个用于解决跨窗口通信的API，它可以实现不同源的window对象之间的消息传递。当一个页面向其打开的子窗口、或被其他页面嵌入的iframe发送消息时，`postMessage`提供了安全且灵活的解决...
window.postMessage虽然说是html5的功能，但是支持IE8+，假如你的网站不需要支持IE6和IE7，那么可以使用window.postMessage。关于window.postMessage，很多朋友说他可以支持跨域，不错，window.postMessage是客户端...
【Html5 postMessage实现跨域消息传递】 在Web开发中，由于浏览器的同源策略，不同源的网页之间无法直接通信，这限制了开发者在处理跨域数据交换时的灵活性。同源策略是为了保障Web安全而设定的一项核心规则，防止...
window.postMessage（）方法可以安全地启用对象之间的跨域通信。 例如，在页面与其产生的弹出窗口之间，或在页面与嵌入其中的iframe之间。 通常，只有并且当它们源自的页面共享相同的协议，端口号和主机时，才允许...