Question

如何优化以下postMessage功能，以便按id将页面附加到正确的iframe，而不是数组window.frames[2]中的位置？

我使用以下功能：

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[2].postMessage(data, 'http://localhost:3000/syndicatedPlayer/syndicatedPlayer.html');
    window.frames[3].postMessage(data, 'http://localhost:3000/syndicatedPlayer/syndicatedPlayer.html');

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

但希望优化此代码，以便我不必在页面上找到要使用的iframe（它应该将帖子消息应用于id="frame1"和id="frame2"，而不是基于手动输入的框架。

拥有id＆＃39;

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

以下是一个想法，但这不起作用：

function getFrameById(id) {
    for (var i = 0; i < window.length; i++) {
        if (window[i].frameElement.id === id) {
            console.log('found frame in index ' + i);
            return window[i];
        }
    }
    return null;
}

getFrameById('frame1').addEventListener("load", function (e) {
    var data = getFontFamily("h1");
});
getFrameById('frame1').postMessage(data, 
'http://jsfiddle.net/mattography/tmhfv2ft/1/show');
console.log('Message sent -->');

getFrameById('frame2').addEventListener("load", function (e) {
 var data = getFontFamily("h1");
    });
getFrameById('frame2').postMessage(data,     
'http://jsfiddle.net/mattography/tmhfv2ft/1/show');
    console.log('Message sent -->');

示例：jsfiddle

将postMessage函数分配给特定的iframe

0 个答案: