ドキュメント間メッセージ転送
3656 ワード
HTML 5は、Webドキュメント間で相互に情報を受信し送信する機能を提供する.この機能を使用すると、Webページが存在するウィンドウオブジェクトのインスタンスを取得するだけでなく、同源(ドメイン+ポート番号)のWebページ間で相互に通信するだけでなく、ドメイン間通信を実現することもできます.まず,他のウィンドウからのメッセージを受信するには,ウィンドウオブジェクトのメッセージイベントを監視する必要がある.WindowsオブジェクトのpostMessageメソッドを使用して他のウィンドウにメッセージを送信します.具体的なケースのホームページには、iframeが含まれています.iframeのsrcは、ホームページの下にないページを指します.この2つのページの間でメッセージが送信されます.
ホームページ:
iframeが指すページ:
ホームページ:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> </title>
</head>
<body>
<iframe src="http://193.168.19.168/ztree/demo/cn/msg.html" width="400" height="400" onload="sendMsg();"></iframe>
<div id="div1">
</div>
<script type="text/javascript" charset="utf-8">
// onmessage , ！
addEventListener('message',function(e){
e=e||event;
//e.origin： + + （80 ）
//e.data:
var obj=JSON.parse(e.data);
if(!obj.error){
alert(' ！');
document.getElementById('div1').innerHTML=' e.origin='+e.origin+', e.data='+e.data;
}
},false);
function sendMsg(){
// iframe window
// document.getElementByTagName('iframe')[0]
var winIframe=window.frames[0];
setTimeout(function(){
//iframe ， postMessage iframe
// ：
// ： url, iframe src url http://193.168.19.168/
winIframe.postMessage('{" ":10," ":20," ":30," ":40," ":50," ":60," ":67}',"http://193.168.19.168/ztree/demo/cn/msg.html");
},2000);
}
</script>
</body>
</html>iframeが指すページ:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>iframe </title>
<script type="text/javascript" charset="utf-8">
// onmessage ,
addEventListener('message', function(e) {
e = e || event;
//
if (e.origin == 'http://127.0.0.1:8020') {
alert(' ');
// e.origin e.data
var obj = JSON.parse(e.data), aHtml = [];
for (var key in obj) {
var age = obj[key], str = '';
switch(true) {
case age<=10:
str = key + ' ' + age + ' 。';
break;
case age<=20:
str = key + ' ' + age + ' 。';
break;
case age<=30:
str = key + ' ' + age + ' 。';
break;
case age<=40:
str = key + ' ' + age + ' 。';
break;
case age<=50:
str = key + ' ' + age + ' 。';
break;
case age<=60:
str = key + ' ， ' + age + ' 。';
break;
default:
str = key + ' ' + age + ' 。';
break;
}
aHtml.push(str);
}
document.body.innerHTML = ' e.origin=' + e.origin + ', e.data=<br />' + aHtml.join('<br />');
} else {
alert(' ');
}
setTimeout(function() {
//e.source window ，
e.source.postMessage('{"error":false,"msg":""}', e.origin);
}, 2000);
}, false);
</script>
</head>
<body>
<div id="div1">
</div>
</body>
</html>