Question

我有一个包含元素的iframe，我正在尝试调整iframe的大小以匹配其内容。当我检查iframe时，我可以看到正文的高度为577px，但是当我在Javascript中访问高度时，我会收到250px。

以下是我用来获取iframe高度的代码：

function getHeight(el) {
  const {clientHeight, outerHeight, innerHeight, offsetHeight} = el;
  return clientHeight || outerHeight || innerHeight || offsetHeight;
}

// called on iframe's onload event
function onIframeLoad() {
  var iFrame = document.getElementById('advertFrame');
  if(iFrame) {
    var heightContainer = iFrame.contentWindow.document.body;
    var height = getHeight(heightContainer) + 'px';
    iFrame.height = height;
    iFrame.style.height = height;
  }
}

Answer 1

您必须等待iframe的内容加载，然后才能获得其高度。 Jquery有一个内置的“ready”函数来检查是否加载了iframe内容。请注意，“ready”是指源html代码的加载，而不是图像和媒体的完整内容。因此，您必须为完全加载后图像和其他高度发生变化的内容设置初始高度。

$(document).ready(function(){
  $('#advertFrame').ready(function() {
      this.style.height =
      this.contentWindow.document.body.offsetHeight + 'px';
  });
})

检查以下示例以获取iframe负载测试：http://jsfiddle.net/ZrFzF/

iFrame高度检测返回不正确的高度

1 个答案: