`

postMessage html5

    博客分类:
  • js
 
阅读更多

 

postMessage api用于iframe的跨域通信,
发送方需要使用:(接收方iframe).postMessage(data,“*”);
接收方需要:第一:事件函数,就是接收到消息之后的回调
                      第二:绑定监听事件
 
 index.html 写道
<!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
 
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>
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>

 

 

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics