前端内嵌Iframe页面，同源非同源消息通信

最新推荐文章于 2024-08-14 09:30:44 发布

好帅的爸爸（）

最新推荐文章于 2024-08-14 09:30:44 发布

阅读量2.1k

点赞数 2

分类专栏： javascript 文章标签： html javascript

本文链接：https://blog.youkuaiyun.com/wangliuqi123/article/details/109577991

版权

本文介绍了如何在前端通过Iframe实现跨域通信，主要利用了Window的postMessage方法。提供了详细的parent.html和children.html的代码示例，详细解析了同源与非同源下的消息传递机制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

参考文档地址：https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage

原理基于postMessage。

demo例子：

parent.html

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <h1>父亲页面</h1>
        <button onclick="sendMeg()">发送数据</button>
        <iframe src="children.html" width="100%" height="200px" id="child"></iframe>
    </body>
    <script>
        function sendMeg(){
            var iframe = document.getElementById("child")
            iframe.contentWindow.postMessage('父页面传送的数据','*');
        }
        function callback(){
            console.log(回调)
        }
        // 监听传送到父页面的数据
        window.addEventListener('message',function(data){
            console.