Javascript 使用postMessage指定window.frame

我使用postMessage将父页面css推送到每个iframe中的页面。问题是，在应用此代码之前，页面上可能已经有超过1个iframe。因此，如何将postMessage专门应用于每个帧的id，而不必手动输入window.frames[0]和window.frames[1]，其中[]根据页面进行调整

iframe

邮递

实际上，window===window.frames，所以您可以使用window[0]来获取帧

也就是说，通过其id获得iframe的方法是以下函数：

function getFrameById(id) {
  for (var i=0;i<window.length;i++) {
    if (window[i].frameElement.id===id) return window[i];
  }
  return null;
}

---

更新：我已经修复并完成了您的fiddle:

您可以通过按id选择iframe，然后发送所需数据的后消息来指定要使用的iframe

您可以按如下方式使用它

函数test1{ document.getElementById'idMyIframe1'.contentWindow.PostMessage此处显示您的消息，*； } 函数test2{ document.getElementById'idMyIframe2'.contentWindow.PostMessage此处显示您的消息，*； }

---

不太清楚如何在这里调用getFrameById函数：您需要创建iframe并在其上设置一个id。作为控制台，这似乎不起作用；没有被命中，也没有正确抓取帧。更新的问题之一是脚本从中抓取字体的标记并不总是h1标记。这只需要能够应用于id=frame1和id=frame2的帧。我在控制台中看到消息，并且该警报由目标iframe弹出。

<script type="text/javascript">
  var getFontFamily = function() {
      var el = document.getElementsByTagName("h1")[0];
      var cs = window.getComputedStyle(el, null);
      return cs.fontFamily;
  } 

    window.addEventListener('load', function(){
    var data = getFontFamily("h1");

    window.frames[0].postMessage(data, 'http://url.html');
    window.frames[1].postMessage(data, 'http://url.html');

    console.log('Message sent -->');
});

</script>

function getFrameById(id) {
  for (var i=0;i<window.length;i++) {
    if (window[i].frameElement.id===id) return window[i];
  }
  return null;
}