跨域iframe通信

主页面与不同域名的iframe之间通信

window.postMessage()

The window.postMessage() method safely enables cross-origin communication between Window objects; e.g., between a page and a pop-up that it spawned, or between a page and an iframe embedded within it.

window.postMessage()方法安全地启用Window对象之间的跨源通信; 例如，在页面和它产生的弹出窗口之间，或者在页面和嵌入其中的iframe之间。
通常，当且仅当它们源自的页面共享相同的协议，端口号和主机（也称为“ 同源策略 ”）时，允许不同页面上的脚本相互访问。window.postMessage()提供一种受控制的机制来安全地规避这种限制（如果使用得当）。

现在我们用个小小demo来体验一下，父页面引入iframe(不同域名,下面的iframe大家也都可以引用测试)，
先发送消息到iframe，iframe接收到后在页面上显示该消息并返回#ccc色值改变父页面body背景颜色。iframe页面上有个颜色选择器，更改不同颜色值，则发送该色值到父页面，父页面接收色值后更改body的背景色。

<body>
这是主页面
<iframe width="100%" height="500" src="http://wangkaiwen.cn/ceshi/" frameborder="0" style="border:1px solid #ccc"></iframe>
</body>
<script>
    window.onload = function () {
        window.frames[0].postMessage('要获取颜色啦', '*');
    };

    window.addEventListener('message', function (e) {
        document.body.style.backgroundColor = e.data;
    }, false);

</script>

<body>
<p>这是子页面</p>
<input type="color" onchange="changeColor(event,this)">
<div id="messageBox"></div>
</body>
<script type="text/javascript">
    var messageBox = document.getElementById('messageBox');

    window.addEventListener('message', function (e) {
        if (e.source != window.parent) return;
        messageBox.innerHTML='收到消息:'+e.data+(new Date());
        window.parent.postMessage('#ccc', '*');
    }, false);

    function changeColor(e,self) {
        window.parent.postMessage(self.value, '*');
    }
</script>

不仅仅是iframe可以用这种方法,window.open打开的页面同样适用，只不过新打开的页面用window.opener就可以获取到原页面。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

跨域iframe通信