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頁面發(fā)送一些數(shù)據(jù)，來從a頁面獲取相應(yīng)的數(shù)據(jù)。
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';
//想要操作當(dāng)前iframe的時候，就像該ifranme中postMessage()一個東西。
window.frames[0].postMessage('', targetOrigin);
//*表示任何域都可以監(jiān)聽。
//當(dāng)監(jiān)聽到message事件的時候，就知道有人向a發(fā)送數(shù)據(jù)了
window.addEventListener('message', function (e) {
document.getElementById('getBInfo').innerHTML = '從b頁面?zhèn)鬟^來的信息:'+ 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()">獲取經(jīng)緯度</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頁面?zhèn)鬟^來的信息:' + JSON.stringify(data);
origin = e.origin;
})
function getInfo() {
// 像a頁面?zhèn)鲾?shù)據(jù)
var option = {isgetlnglat: true};
parent.postMessage(option, origin);
}
</script>
</body>
17.gif
18.gif
