HTML5权威指南 11.通信API
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title></title> 7 <script type="text/javascript"> 8 //（1）监听message事件 9 window.addEventListener("message",function(ev){ 10 //（2）忽略指定URL地址之外的页面传过来的消息 11 if(eb.origin!="http://www.baidu.com"){ 12 return; 13 } 14 //（3）显示消息 15 alert("从"+ev.origin+"那里传过来的消息:\n\""+ev.data+"\""); 16 },false); 17 function hello(){ 18 var iframe=window.frames[0]; 19 //（4）传递消息 20 iframe.postMessage("你好","http://wwww.baidu.com"); 21 } 22 </script> 23 </head> 24 <body> 25 <h1>跨域通信示例</h1> 26 <iframe src="http://www.baidu.com" frameborder="0" width="400" onload="hello()"></iframe> 27 </body> 28 </html>
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title></title> 7 <script type="text/javascript"> 8 window.addEventListener("message",function(ev){ 9 if(ev.origin!="http://"){ 10 return; 11 } 12 document.body.innerHTML="从"+ev.origin+"那里传来的消息。<br>\""+ev.data+"\""; 13 //(5)向主页面发出消息 14 ev.source.postMessage("您好。这里是"+this.location,ev.origin); 15 },false); 16 </script> 17 </head> 18 <body> 19 20 </body> 21 </html>
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title></title> 7 <script type="text/javascript"> 8 function window_onload() { 9 var mc, postMessageHandler; 10 mc = new MessageChannel(); 11 12 //向父页面发送端口及消息 13 window.parent.postMessage("子页面1已加载完毕", "http://localhost/test.html", [mc.port2]); 14 15 //定义本页面中端口接收到消息时的事件处理函数中的内容 16 portMessageHandler = function (portMsgEvent) { 17 alert(portMsgEvent.data); 18 } 19 20 //定义本页面中端口接收到的消息时的事件处理函数 21 mc.port1.addEventListener("message", portMessageHandler, false); 22 23 //打开本页面中的端口，开始监听 24 mc.port1.start(); 25 } 26 </script> 27 </head> 28 29 <body onload="window_onload();"> 30 31 </body> 32 33 </html>
