Iframe之间互相传递消息

最新推荐文章于 2025-06-18 09:28:22 发布

生活是枷锁

最新推荐文章于 2025-06-18 09:28:22 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏：笔记

本文链接：https://blog.youkuaiyun.com/u012511100/article/details/117710494

笔记专栏收录该内容

11 篇文章

订阅专栏

本文详细讲解了两个网页A和B通过POSTMessageAPI实现双向通信的过程，涉及A向B发送消息和B响应A的事件处理。重点展示了前端JavaScript与后端事件监听的结合应用。

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

// A.html
<body>
<button id="button">发送到B</button>
<iframe src="B.html" id='myframe'></iframe>
 </body>
 
<script>
// A 向B传递信息
document.getElementById("button").contentWindow.postMessage("sendMessage", '*');
 
// A 接收B的信息
window.addEventListener("message", function(e){
      if (e.data === 'reimbClose') {
        // 事件
      }
    }, false);
    或
    window.onmessage = function（e）{
    if (e.data === 'reimbClose') {
        // 事件
      }
    }

B.html
 
<body>
<button id="button">发送A</button>
</body>
<script>
var button = document.getElementById('button');
// B 向A传递信息
button.addEventListener('click',function(){
        window.parent.postMessage('reimbClose','*');
},false)
 
// B 接收A的信息
window.addEventListener('message', function(e) {
  if(e.data === 'sendMessage'){//关闭窗口停止websocket
    // 事件
  }
})
或
    window.onmessage = function（e）{
    if (e.data === 'sendMessage') {
        // 事件
      }
    }