HTML5提供了在网页文档之间互相接收与发送信息的功能。使用这个功能,只要获取到网页所在窗口对象的实例,不仅同源(域+端口号)的web网页之间可以互相通信,甚至可以实现跨域通信。
首先,要想接受从其他的窗口那里发过来的消息,就必须对窗口对象的message事件进行监视。
使用window对象的postMessage方法向其他窗口发送消息。
具体案例主页面中包括一个iframe,iframe的src指向与主页面不在一个域下的网页,这两个网页之间进行消息传输如下:
主页面:
- <!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>
<!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" οnlοad="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>
- <!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>