iframe+postMessage解决跨域问题_iframe+postmessage sso(singlesignon)-优快云博客

本文链接：https://blog.youkuaiyun.com/sllailcp/article/details/99843747

本文通过一个实际案例展示了如何使用HTML5的postMessage功能实现跨文档消息传输，包括a页面与嵌入的b页面之间的数据交互，特别强调了跨域限制及解决方法。

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