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




react iframe自适应高度 (4)

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

为什么? 1.大小问题。 2. iframe具有该src属性担心。 即绝对路径。 3.页面的额外复杂性

我的解决方案 - 通过AJAX调用动态加载的DIV。 DIV会自动调整大小。 虽然AJAX代码需要javascript的工作(可以通过框架),他们是相对于网站的位置。 3是一个洗,你在交易复杂的页面到JavaScript。

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

做ajax调用来填充数据的mystuff div,让浏览器担心。

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

我搜索了互联网没有成功。 我也测试了雅虎库,它有一些文档和视口尺寸的方法,但是并不令人满意。 我的解决方案工作得体,但有时它会计算一个更高的高度。 我在Firefox / IE / Safari中研究和测试了很多关于文档高度的属性: documentElement.clientHeight, documentElement.offsetHeight, documentElement.scrollHeight, body.offsetHeight, body.scrollHeight, ...另外,jQuery没有一致性在$(document.body).height(), $('html', doc).height(), $(window).height()

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

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


这是一个似乎工作的解决方案。 基本上,在大多数情况下,scrollHeight是正确的值。 但是,在IE(特别是6和7)中,如果内容仅包含在文本节点中,则不计算高度,只是默认设置CSS中设置的高度或iframe上的“height”属性。 这是通过反复试验发现的,所以要把它看作是值得的。

function getDocumentHeight(doc) {
  var mdoc = doc || document; 
  var docHeight = mdoc.body.scrollHeight;

  if ($.browser.msie) {
      // IE 6/7 don't report body height correctly.  
      // Instead, insert a temporary div containing the contents.

      var child = $("<div>" + mdoc.body.innerHTML + "</div>", mdoc);
      $("body", mdoc).prepend(child);
      docHeight = child.height();
      child.remove();
  }

  return docHeight;
}

因为在你的例子中你正在访问IFRAME中的文档我想你是在谈论知道文档的高度,而不是框架本身。 此外,这意味着内容来自您自己的网站,您可以控制它的内容。

那么,为什么不简单地在您的内容中放置一个DIV,然后使用该DIV的clientHeight?

您在IFRAME中加载的代码:

...
<body>
  <div id="content">
  ...
  </div>
</body>

母文件:

 function getDocumentHeight(mdoc) {
    return mdoc.getElementById("content").clientHeight;
 }

顺便说一句,你的示例函数的这一部分没有意义,因为“文档”不引用IFRAME: var mdoc = doc || document; var mdoc = doc || document;






iframe