Firefox 在 iframe 中没有给出正确的高度

Posted 2023-03-06

【中文标题】Firefox 在 iframe 中没有给出正确的高度

【英文标题】：firefox not giving right height within iframe

【发布时间】：2011-06-28 14:57:33

【问题描述】：

这个错误类似于：

jQuery reports incorrect element height in Firefox iframe

他得到了一个错误的号码。我的不同之处在于，当我的框架加载时 - 它为零。

我正在尝试将其内容的高度发送到父窗口。它在负载时不断发回零。如果我将间隔设置为 50 毫秒，我会看到数字增加直到正确的数字。零总是在间隔之前给出的第一个数字。

其中至少有一个元素具有预定义的高度 - 一些使用 css，一些使用内联。因此，如果元素仍在加载，则没有理由返回零。

如果我 console.log $('#element')，该元素看起来是隐藏的（在最新版本中褪色）。如果我在 Chrome 中运行它，它运行完美。我还尝试了本地 clientHeight，它也给了 0，所以我不认为它是 jQuery。

编辑： 在我尝试计算高度之前，这些元素是通过 JS 添加的。他们在开始时不在页面上可能是一个问题。尝试制作一个简单的演示页面来发布。

这在 Firefox 4 beta 上不会发生

【问题讨论】：

在 iframe 中，您尝试访问加载到 IFRAME 中的元素，而不是 iframe 本身，对吗？另外，无论如何你可以在 jsFiddle 上复制它？

是的，iframe 中的元素。我现在要在 fiddle 上做一个演示。

【参考方案1】：

我知道这是一个老问题，但我在 Firefox 中遇到了类似的问题，iframe 预加载到 Bootstrap 模式中，最终显示时被截断。在那之前我无法计算出正确的高度，但我可以用一点 jQuery 让它合理地无缝调整大小（对最终用户）。我在这里回答，以防其他人继续寻找类似问题的解决方案：

$("#myIframe").load(function() 
  $m = $(".modal-body");
  var mh = $m.height();

  var wait = setInterval(function() 
    var ih = $("#myIframe").contents().find("body").height();
    if (ih == mh) 
      clearInterval(wait);
     else if (ih > 0) 
      clearInterval(wait);
      $m.animate( height: ih );
    
  , 50);

  $(".modal").modal("show");
);

这个想法是，当 iframe 被加载时，如果浏览器计算出它的高度为 0，然后我循环直到它报告的高度发生变化，然后平滑地为容器大小设置动画。

【参考方案2】：

计算时 iframe 为 display: none，因为我不想在一切设置好之前显示它。因此，即使从技术上讲它是一个不同的窗口，它仍然认为元素的父级是无显示的。

【参考方案3】：

没有看到您的 html、jQuery 等，很难确定。

当返回的高度似乎不准确时，我会说我很幸运使用offsetHeight。你试过吗？

编辑：另一个想法：我过去注意到，在内容完全加载之前通过 javascript 访问 IFRAME 可能会出现问题。只是需要记住的一点。

【讨论】：

offsetHeight 没有这样的运气。 iframe 已加载 jquery，并且 HTML 太多，无法在此处使用。基本上有一个 UL 有 10 个 LI，我正在尝试获得它的高度。我在获取带有显示块的表单的尺寸以及 td 时遇到了类似的问题 - 所有这些都在这个 iframe 中。

基本上，身高通常是相当挑剔的。我强烈建议使用 FireBug 并查看布局选项卡。你应该能想出一个方法来拉回魔法组合。您还应该能够设置断点并使用监视列表来查找魔法属性。不过，这就是我的建议，对不起:)