iframe+postMessage解决跨域问题
2019-08-27 本文已影响0人
darkbluelove
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>
17.gif
下面是b页面传{isgetlnglat:false}效果图：
18.gif
