计算跨浏览器的iframe高度

Question

我的javascript体验中最困难的问题之一是iframe高度的正确(即"跨浏览器")计算.在我的应用程序中,我有很多动态生成的iframe,我希望它们都在load事件结束时进行一种自动调整以调整它们的高度和宽度.

在高度计算的情况下,我的最佳解决方案是以下(在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());
  }
}

我没有成功搜索互联网.我还测试了雅虎库,它有一些文档和视口尺寸的方法,但它并不令人满意.我的解决方案工作正常,但有时它会计算出更高的高度.我已经在Firefox/IE/Safari中研究并测试了大量有关文档高度的属性:documentElement.clientHeight, documentElement.offsetHeight, documentElement.scrollHeight, body.offsetHeight, body.scrollHeight, ... jQuery在各种浏览器中也没有连贯的行为$(document.body).height(), $('html', doc).height(), $(window).height()

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

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

Answer 1

虽然我喜欢你的解决方案，但我总是发现 IFRAME 带来的麻烦超过了它们的价值。

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

我的解决方案 - 通过 AJAX 调用动态加载的 DIV。DIV 将自动调整大小。尽管 AJAX 代码需要 JavaScript 工作（可以通过框架完成），但它们与站点所在的位置相关。3 是一种清洗，你将页面的复杂性换成了 JavaScript。

使用 <DIV id="mystuff" /> 代替 <IFRAME ...>

执行 ajax 调用以用数据填充 mystuff div 并让浏览器处理它。