天天看点

iframe+postMessage解决跨域问题

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}效果图:

iframe+postMessage解决跨域问题

下面是b页面传{isgetlnglat:false}效果图:

iframe+postMessage解决跨域问题

继续阅读