postMessage 是 HTML5 新增加的一项功能,跨文档消息传输(Cross Document Messaging),目前:Chrome 2.0+、Internet Explorer 8.0+, Firefox 3.0+, Opera 9.6+, 和 Safari 4.0+ 都支持这项功能。
我们做个小demo演示下,a页面里面用iframe嵌套了b页面,b页面像a页面发送一些数据,来从a页面获取相应的数据。
1.首先新建a页面:
<body>
<h1>a页面</h1>
<div id="getBInfo"></div>
<br/>
<iframe id="iframe" src="http://192.168.1.235:9986" style="width:500px;"></iframe>
<script>
window.onload = function () {
var targetOrigin = 'http://192.168.1.235:9986';
//想要操作当前iframe的时候,就像该ifranme中postMessage()一个东西。
window.frames[0].postMessage('', targetOrigin);
//*表示任何域都可以监听。
//当监听到message事件的时候,就知道有人向a发送数据了
window.addEventListener('message', function (e) {
document.getElementById('getBInfo').innerHTML = '从b页面传过来的信息:'+ JSON.stringify(e.data);
// 假装这是个接口
setTimeout(function(){
if (e.data && e.data.isgetlnglat) {
window.frames[0].postMessage({longitude:'120.146838',latitude:'30.291313'}, targetOrigin);
}else{
window.frames[0].postMessage('哈哈,就不告诉你!', targetOrigin);
}
},1000)
});
}
</script>
</body>
2.再新建b页面:
<body>
<h3>我是iframe里面的b页面哦</h3>
<br/>
<button onclick="getInfo()">获取经纬度</button>
<br/>
<div id="getAInfo"></div>
<script>
// var origin = 'http://192.168.1.235:9987'; 如果a.html初始没有postMessage()的话,由于娶不到a页面的地址,所以就要手动把地址加上;
var origin = '';
window.addEventListener('message', function (e) {
if (e.source != window.parent) {
return;
}
var data = e.data;
if (data) document.getElementById('getAInfo').innerHTML = '从a页面传过来的信息:' + JSON.stringify(data);
origin = e.origin;
})
function getInfo() {
// 像a页面传数据
var option = {isgetlnglat: true};
parent.postMessage(option, origin);
}
</script>
</body>
下面是b页面传{isgetlnglat: true}效果图:
下面是b页面传{isgetlnglat:false}效果图: