1.跨浏览器通讯之iframe 以及window.open

最新推荐文章于 2025-07-28 14:37:37 发布

原创最新推荐文章于 2025-07-28 14:37:37 发布 · 1.9k 阅读

1 ·

CC 4.0 BY-SA版权

HTML5 专栏收录该内容

12 篇文章

订阅专栏

本文介绍HTML5中同一域名下iframe间的通信方法，包括通过BOM对象及postMessage API实现的数据交换，并提供具体代码实例。

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

同一域名下通讯：

1.iframe之间通讯：

效果以及代码：http://sandbox.runjs.cn/show/3ntvrlml

2.BOM对象实现通讯：

效果以及代码：http://sandbox.runjs.cn/show/owl7v6pm

3.HTML5 Web Workers

HTML5实现iframe：

域名为http://localhost:8080下的页面：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<button id="ch">发送消息</button>
<iframe src="http://localhost:8080/HTML5/1/getMesage.html" frameborder="1"  id="iframe"></iframe>
<script>

    document.getElementById("ch").onclick=function(){
    /*实现效果
        --当前页面的域名为http://127.0.0.1:8080/HTML5/1/postMessage.html
        --向域名为http://localhost:8080/HTML5/1/getMesage.html的iframe发送数据

        //postMessage参数
         //第一个是要发送的数据
        //第二个是要发送目标的域名[需要携带http协议,需要和iframe的域名相同]
      */

        document.getElementById("iframe").contentWindow.postMessage("1","http://localhost:8080")
    }
    
</script>
</body>
</html>

域名为http://127.0.0.1:8080的接收信息页面：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<p>http://localhost:8080下的页面</p>
<script>
    window.addEventListener('message', function(ev) {

        //message事件的事件对象下保存了发送过来的内容
        //ev.data : 发送过来的数据
        //ev.origin
        //alert('我接收到了a.com页面发送过来的数据，内容是：' + ev.data);
        //alert(ev.origin);
        if (ev.data == '1') {
            document.body.style.background = 'red';
            alert("命令来源："+ev.origin)
        }

    }, false);
</script>
</body>
</html>