使用 postMessage 指定 window.frame

Question

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

内嵌框架

<iframe id="frame1" style="width: 100%; height: 420px;" src="../syndicatedPlayer.html#videoUrl=http://video.mp4?" frameborder="0"></iframe>

<iframe id="frame2" style="width: 100%; height: 420px;" src="../syndicatedPlayer.html#videoUrl=http://video.mp4?" frameborder="0"></iframe>

postMessage()

<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>

Answer 1

实际上， 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;
}

更新：我已经修复并完成了你的小提琴： http : //jsfiddle.net/9qtcmbnn/4/

Answer 2

您可以通过按 id 选择 iframe 来指定您将使用的 iframe，然后发布您想要的数据

你可以使用它如下

 <script> function test1() { document.getElementById('idMyIframe1').contentWindow.postMessage("your message here", "*"); } function test2() { document.getElementById('idMyIframe2').contentWindow.postMessage("your message here", "*"); } </script> <iframe id="idMyIframe1" onload="test1()" src="http://example.otherdomaintosenddatato.com"></iframe> <iframe id="idMyIframe2" onload="test2()" src="http://example.otherdomaintosenddatato.com"></iframe>