javascript - 计算跨浏览器的 iframe 高度

Question

在我的 javascript 经验中，最困难的问题之一是正确(即“跨浏览器”)计算 iframe 高度。在我的应用程序中，我有很多动态生成的 iframe，我希望它们都在加载事件结束时执行某种自动调整大小以调整它们的高度和宽度。

在计算高度的情况下，我最好的解决方案如下(在 jQuery 的帮助下):

function getDocumentHeight(doc) {
  var mdoc = doc || document;
  if (mdoc.compatMode=='CSS1Compat') {       
      return mdoc.body.offsetHeight;
  }
  else {
    if ($.browser.msie)
      return mdoc.body.scrollHeight;
    else  
      return Math.max($(mdoc).height(), $(mdoc.body).height());
  }
}

我在互联网上搜索没有成功。我还测试了 Yahoo 库，它有一些文档和视口(viewport)尺寸的方法，但并不令人满意。我的解决方案运行良好，但有时会计算出更高的高度。我在 Firefox/IE/Safari 中研究和测试了大量关于文档高度的属性:jQuery 在各种浏览器中也没有一致的行为调用 $(document.body).height(), $('html', doc).height(), $(window).height()

我不仅在加载事件结束时调用上述函数，而且在动态插入 DOM 元素或隐藏或显示元素的情况下也会调用上述函数。这种情况有时会破坏仅在加载事件中起作用的代码。

有人有真正的跨浏览器(至少是 Firefox/IE/Safari)解决方案吗？一些技巧或提示？

Answer 1

虽然我喜欢您的解决方案，但我总是发现 IFRAME 带来的麻烦多于它们的值(value)。

为什么？ 1.尺码问题。 2. iframe 有 src 属性需要担心。即绝对路径。 3. 页面的额外复杂性。

我的解决方案 - 通过 AJAX 调用动态加载的 DIV。 DIV 将自动调整大小。尽管 AJAX 代码需要 javascript 工作(这可以通过框架完成)，但它们与站点所在位置有关。 3 是一个洗，你在交易页面的复杂性高达 javascript。

代替