window.postMessage 实现iframe子级与它的父级的通信

2022-07-26,,,

参考:用HTML5里的window.postMessage在两个网页间传递数据 – WEB骇客 (webhek.com)

环境:

Microsoft Edge 版本 87.0.664.52 (官方内部版本) (64 位)

此浏览器基于 Chromium 开源项目及其他 开源软件。

player页面

<body>
    <h1>player页面</h1>
    <iframe id="iframe" src="./index.html" frameborder="0"></iframe>
  </body>
  <script>
    //获取页面iframe节点
    var iframe = document.getElementById("iframe");

    //监听iframe传入事件
    window.addEventListener("message", function (e) {
      console.log("e==player", e);
    });

    //监听本页面键盘事件
    window.addEventListener("keydown", function (e) {
      if (e && (e.keyCode || e.which)) {
        var code = e.keyCode || e.which;
        //将键盘事件发送到iframe页面
        iframe.contentWindow.postMessage({ keyCode: code }, "*");
      }
    });
  </script>

iframe页面

<body>
    <h1>iframe页面</h1>
  </body>
  <script>
    //iframe页面,监听player页面传入事件
    window.addEventListener("message", function (e) {
      console.log("index==", e);
      //根据传入事件执行function
      var data = {
        msg: "index执行function",
        code: e.data.keyCode,
      };
      //将信息传入player页面
      window.parent.postMessage(data, "*");
    });
  </script>

 

本文地址:https://blog.csdn.net/weixin_40532650/article/details/110533077

《window.postMessage 实现iframe子级与它的父级的通信.doc》

下载本文的Word格式文档,以方便收藏与打印。