计算跨浏览器iframe高度 [英] Computing a cross-browser iframe height

问题描述

我的javascript体验中最困难的问题之一是 iframe高度的正确（即跨浏览器）计算。
在我的应用程序中，我有很多动态生成的iframe，我希望它们在load事件结束时都做一些autoresize来调整它们的高度和宽度。

One of the most difficult problems in my javascript experience has been the correct (that is "cross-browser") computing of a iframe height. In my applications I have a lot of dynamically generated iframe and I want them all do a sort of autoresize at the end of the load event to adjust their height and width.

在高度计算的情况下，我的最佳解决方案如下（在jQuery的帮助下）：

In the case of height computing my best solution is the following (with the help of 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（）

I searched the internet without success. I also tested Yahoo library that has some methods for document and viewport dimensions, but it's not satisfactory. My solution works decently, but sometimes it calculates a taller height. I've studied and tested tons of properties regarding document height in Firefox/IE/Safari: documentElement.clientHeight, documentElement.offsetHeight, documentElement.scrollHeight, body.offsetHeight, body.scrollHeight, ... Also jQuery doesn't have a coherent behavior in various browser with the calls $(document.body).height(), $('html', doc).height(), $(window).height()

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

I call the above function not only at the end of load event, but also in the case of dynamically inserted DOM elements or elements hidden or shown. This is a case that sometimes breaks the code that works only in the load event.

是否有人拥有真正的跨浏览器（至少是Firefox / IE / Safari）解决方案？一些提示或提示？

Does someone have a real cross-browser (at least Firefox/IE/Safari) solution? Some tips or hints?

推荐答案

虽然我喜欢你的解决方案，但我总是发现IFRAME比它们更麻烦值得。

Although I like your solution, I've always found IFRAMEs to be more trouble than they're worth.

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

Why ? 1. The sizing issue. 2. the iframe has that src attribute to worry about. i.e. absolute path. 3. the extra complexity with the pages.

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

My solution - DIVs which are dynamically loaded through AJAX calls. DIVs will auto size. Although the AJAX code requires javascript work (which can be done through frameworks) they are relative to where the site is. 3 is a wash, you're trading complexity in pages up to javascript.

而不是< IFRAME ...>使用< DIV id =mystuff/>

Instead of <IFRAME ...> use <DIV id="mystuff" />

执行ajax调用以使用数据填充mystuff div并让浏览器担心它。

Do the ajax call to fill the mystuff div with data and let the browser worry about it.

这篇关于计算跨浏览器iframe高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！