HTML5里实现父子窗体通讯的解决方案
同域名下的例子：
父窗体：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5通讯API</title>
</head>
<body>
<h1>通讯示例，相同域名下</h1>
<iframe width="500" src="http://localhost:63342/socketprj/sub.html" onload="test()"></iframe>
<div id="showcontent"></div>
</body>
</html>
<script type="text/javascript">
window.addEventListener("message",function(evt){
document.getElementById("showcontent").innerHTML = evt.data;
},false);
function test(){
var frm = window.frames[0];
frm.postMessage("你好，我是父页面访问地址是http://localhost:63342/socketprj/main.html","http://localhost:63342/socketprj/sub.html");
}
</script>
子窗体：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>子页面</title>
</head>
<body>
子页面
</body>
</html>
<script type="text/javascript">
window.addEventListener("message",function(evt){
console.log(evt);
document.body.innerHTML = "父页面过来的数据：" + evt.data;
evt.source.postMessage("子页面回传过来的信息地址是" + this.location + "，父页面的地址是" + evt.origin,evt.origin);
},false);
</script>
这种跨域通讯方式其实就是一个事件，这个事件就是message事件，它是window对象下的一个事件，接收信息就是给window对象绑定message事件，event对象的data属性可以获取发送过来的信息，发送信息则是使用postMessage方法了。
如果是跨域，子窗体的代码不变同上，父窗体代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5通讯API</title>
</head>
<body>
<h1>通讯示例，不相同域名下</h1>
<iframe width="500" src="http://localhost:8080/sub.html" onload="test()"></iframe>
<div id="showcontent"></div>
</body>
</html>
<script type="text/javascript">
window.addEventListener("message",function(evt){
document.getElementById("showcontent").innerHTML = evt.data;
},false);
function test(){
var frm = window.frames[0];
frm.postMessage("你好，我是父页面访问地址是http://localhost:63342/socketprj/main.html","http://localhost:8080/sub.html");
}
</script>
