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

【问题标题】：Get and set height from multiple iFrames with the same ID从具有相同 ID 的多个 iFrame 中获取和设置高度
【发布时间】：2018-02-27 19:28:19
【问题描述】：

我正在像这样拟合 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 获得它自己的高度，无论 id 是什么，或者以其他方式使其工作？

【问题讨论】：

标签： javascript html iframe

【解决方案1】：

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

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 向您发送包含数据的消息，然后导致您以潜在的恶意方式操纵页面元素。

【讨论】：