Question

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

IFRAME

<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，所以你可以使用窗口[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，然后通过邮件对您想要的数据进行邮寄

您可以按以下方式使用它

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

使用postMessage指定window.frame

2 个答案: