iframe跨域数据传递
项目中需要和其他单位合作开发，方案采用iframe嵌入页面，开发过程中设计到了跨域数据的传递，初步方案决定使用html5 API postMessage进行iframe跨域数据传递；
域名A下的页面
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
<title>Page_1</title>
</head>
<body style="background: palegoldenrod;">
<div style="width:100%;height:100px;">这是父页面</div>
<div id="cont_father"></div>
<iframe id="page_1" src="http://192.168.100.40:4200/page2/index.html" width="100%" style="padding:0px; min-height:580px;"></iframe>
<div id="btn_father" style="border:1px solid #999;padding: 10px 50px;display: inline-block;cursor:pointer">打开console，点击后向子页面发送数据</div>
<script>
window.onload=function () {
var btn_father=document.getElementById('btn_father');
var cont_father=document.getElementById('cont_father');
var sendData={
text:'这是父页面的数据'
}
bind(btn_father,'click',function () {
window.frames[0].postMessage(JSON.stringify(sendData),'http://192.168.100.40:4200/page2/index.html');//数据发送
})
bind(window,'message',function(e) {
var e=window.event || arguments[0];
var data = JSON.parse(e.data);
console.log('我是父页面，这是子页面发送的数据：'+data);
console.log(data.text)
cont_father.innerHTML=data.text;
console.log('-------------------')
})
function bind(obj, evname, fn) {
if (obj.addEventListener) {
obj.addEventListener(evname, fn, false);
} else {
obj.attachEvent("on" + evname, function () {
fn.call(obj);
})
}
}
}
</script>
</body>
</html>
域名B下的页面
<!doctype html>
<html>
<head>
<title>Page_2</title>
<meta charset="utf-8">
</head>
<body style="background: #fff">
<h3>这是子页面</h3>
<div id="cont_child"></div>
<div id="btn_child" style="border:1px solid #eee;padding: 10px 50px;display: inline-block;cursor:pointer">打开控制台，并点击</div>
<script>
window.onload=function(){
var btn_child=document.getElementById("btn_child");
var cont_child=document.getElementById("cont_child");
var sendData={text:'我是iframe里面的数据'};
bind(btn_child,'click',function(){
window.parent.postMessage(JSON.stringify(sendData),'http://192.168.100.40:4100/page1/index.html');//数据发送
})
bind(window,'message',function(e) {
var e=window.event || arguments[0];
if(e.source!=window.parent) return;
var data = JSON.parse(e.data);
console.log('我是子页面，这是父页面发送的数据：'+data);
console.log(data.text)
cont_child.innerHTML=data.text;
console.log('------------------')
})
function bind(obj, evname, fn) {
if (obj.addEventListener) {
obj.addEventListener(evname, fn, false);
} else {
obj.attachEvent("on" + evname, function () {
fn.call(obj);
})
}
}
}
</script>
</body>
</html>
经测试，可以兼容ie8
