在我的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());
  }
}

我搜索互联网没有成功。我还测试了Yahoo库,该库具有一些用于文档和视口(viewport)尺寸的方法,但这并不令人满意。
我的解决方案工作得不错,但有时它会计算出更高的高度。
我已经研究和测试了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)解决方案吗?一些提示或提示?

最佳答案

尽管我喜欢您的解决方案,但我总是发现IFRAME比它们值得的麻烦更多。

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

我的解决方案-通过AJAX调用动态加载的DIV。 DIV将自动调整大小。尽管AJAX代码需要javascript工作(可以通过框架完成),但它们是相对于站点所在的位置。 3是一种洗礼,您要在多达javascript的页面中交易复杂性。

代替,使用



进行ajax调用,将数据填充到mystuff div中,然后让浏览器对此进行担心。

关于javascript - 计算跨浏览器的iframe高度,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/207720/

10-12 12:58
查看更多