如何动态自动缩小 iframe 高度？答案

【问题标题】：How to auto shrink iframe height dynamically?如何动态自动缩小 iframe 高度？
【发布时间】：2014-03-13 04:18:01
【问题描述】：

我使用以下代码实现动态iframe高度：

在<head>：

<script language="javascript" type="text/javascript">
function resizeIframe(obj) {
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
</script>

在<body>：

<iframe name="myiframe" src="somepage.html" width="100%" frameborder="0"
scrolling="no" onload='javascript:resizeIframe(this);' />
</iframe>

此代码仅在高度增加时工作正常。因此，当 iframe 内的内容高度增加时，iframe 会更新其高度并随之增加。

问题在于高度减少或缩小。当 iframe 内的内容减少时，它不会减少并导致大量不需要的空白。这只发生在 Chrome 中，IE & FF 工作正常。

Here is my Page

我想知道如何让这段代码在 iframe 高度减小时自动收缩？

截图一：

截图二：

更新 1

我把下面的代码放在<head>

<script src="jquery-1.10.2.min.js"></script>
<script language="javascript" type="text/javascript">
$(function(){
var iframeDoc = $('iframe[name="dservers"]').contents().get(0);
$('iframe[name="dservers"]').load(function(){
    docHeight = $(iframeDoc).height();
    $('iframe[name="dservers"]').height( docHeight );
});
});

<body>中的iframe代码

<iframe name="dservers" src="dual_core.html" width="100%" frameborder="0"
scrolling="no" /></iframe>

iframe 未显示在页面中。它出现一秒钟然后消失。

更新 2

我认为问题在于(function(){ 之前的$ 字符，我将其删除。对不起，我对 jquery 没有太多经验。我更新了页面并删除了onload="resizeFrame()"，但 iframe 现在无法动态运行。

【问题讨论】：

Duplicate Your previous of the same question here 如果您正确实施，此解决方案将适用于您。

标签： javascript jquery html css iframe

【解决方案1】：

问题已解决

我在互联网上进行挖掘，发现一个代码为我解决了整个问题。我想分享它，以便任何人都可以使用它来获得动态 iframe 高度。

首先，将以下代码放在<head>标签之间：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
function getDocHeight(doc) {
doc = doc || document;
var body = doc.body, html = doc.documentElement;
var height = Math.max( body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight );
return height;
}
function setIframeHeight(myiframeid) {
var ifrm = document.getElementById(myiframeid);
var doc = ifrm.contentDocument? ifrm.contentDocument: ifrm.contentWindow.document;
ifrm.style.visibility = 'hidden';
ifrm.style.height = "10px";
ifrm.style.height = getDocHeight( doc ) + 5+"px";
ifrm.style.visibility = 'visible';
}
</script>
<script>(function(run){
for (i=0;i<frames.length; i++) {
var f1 = document.getElementsByTagName('myiframename')[i];
if(!f1 && window.addEventListener && !run){
document.addEventListener('DOMContentLoaded', arguments.callee, false);
return;
}
if(!f1){setTimeout(arguments.callee, 300); return;}
f2 = f1.cloneNode(false);
f1.src = 'about: blank';
f2.frameBorder = '0';
f2.allowTransparency = 'yes';
f2.scrolling = 'no';
f1.parentNode.replaceChild(f2, f1);
}
})();
</script>

第二，<body>中的iframe代码：

<iframe id="myiframeid" name="myiframename" src="somepage.html" width="100%"
frameborder="0" scrolling="no" onload='javascript:setIframeHeight(this.id);' />
</iframe>

第三个和最后一个，CSS：

#myiframeid{
width: 100%;
}

注意：您应该拥有 iframe 的名称和 ID。

兼容所有浏览器（Chrome、Firefox、IE）。

祝你有美好的一天！

【讨论】：

【解决方案2】：

我编写了一个小库来处理所有这些问题，并在内容更改或浏览器窗口大小调整时保持 iframe 的大小。

https://github.com/davidjbradshaw/iframe-resizer

【讨论】：

感谢您的图书馆。在演示页面中，当我更快地调整窗口大小时，iframe 高度没有正确调整。如果我缓慢调整大小，那么它确实如此。有什么线索吗？
@VJAI 以前没见过。你能在github上提个票吗？

【解决方案3】：

我想了很多，并认为我想出了另一个解决方案，可以从父文档中解决您的问题。而不是在 iframe 中编辑文档。但是，由于跨源策略，我无法对其进行测试。试试这个，让我知道它是如何工作的。

var iframeDoc = $('iframe[name="dservers"]').contents().get(0);
$('iframe[name="dservers"]').load(function(){
    docHeight = $(iframeDoc).height();
    $('iframe[name="dservers"]').height( docHeight );
});

希望这对你有用。

编辑：此修复将要求您删除 onload="" 功能。

Edit-2：您似乎已将这两个脚本组合在一起。你有这个：

  function resizeIframe(obj) {
    obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
    var iframeDoc = $('iframe[name="dservers"]').contents().get(0);
$('iframe[name="dservers"]').load(function(){
    docHeight = $(iframeDoc).height();
    $('iframe[name="dservers"]').height( docHeight );
});
  }

用这个替换整个脚本：

$(function(){
    var iframeDoc = $('iframe[name="dservers"]').contents().get(0);
    $('iframe[name="dservers"]').load(function(){
        docHeight = $(iframeDoc).height();
        $('iframe[name="dservers"]').height( docHeight );
    });
});

并从 iframes 标记中删除 onload="resizeFrame()"。

【讨论】：

非常感谢，我现在要试试这个，然后回来。
不幸的是，它没有用。我不确定我是否以正确的方式实现它，但我在父页面中附加了“jquery-1.10.2.min.js”，复制并粘贴了以下标签之间的代码
其实也取消了动态高度。
您好，看来我插入的代码有误。对不起，我很累。但它现在 100% 运行良好。非常感谢您的帮助，我很感激。
没问题！很高兴帮助:)