Question

我是这样拟合iframe高度：

      // Fit height for iframe
      // Create IE + others compatible event handler
      var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
      var eventer = window[eventMethod];
      var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";



      // Listen to message from child window
      eventer(messageEvent, function (e) {
           document.getElementById('frame-'+e.data.id+'').style.height = e.data.height + 'px';
      }, false);

它的工作原理非常好。我在页面上有3个iframe，并且都有不同的id（我从e.data.id获得），但问题是当我添加另一个iframe具有相同的源但具有不同的参数时，在这种情况下我有两个相同的ID不同的高度，只有第一个得到它的高度。

我如何调整这个以便每个iframe获得它自己的身高，无论身份是什么，或者以其他方式让它起作用？

Answer 1

您可以匹配id，而不是定位source，例如：

var iframes = document.getElementsByTagName("iframe");
for (var i = 0; i < iframes.length; i++) {
  if (iframes[i].contentWindow === e.source) {
    iframes[i].style.height = e.data.height + "px";
    break;
  }
}

或者，您可以查看MessageChannel为每个iframe提供自己唯一的消息传递通道，在这种情况下，由于收到消息的频道，您将始终知道消息来自哪个iframe上。

但是，有关安全性的说明 - 您应该检查传入消息的origin（以及可能的其他检查）。您不希望未经授权的iframe向您发送包含数据的消息，然后导致您以潜在的恶意方式操纵页面元素。

从具有相同ID的多个iFrame获取和设置高度

1 个答案: