Question

我使用以下代码来实现动态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＆amp; FF工作正常。

Here is my Page

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

屏幕截图1：

Screenshot one

屏幕截图二：

Screenshot two

更新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现在无法动态执行。

Answer 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 ）。

祝你有个美好的一天！

Answer 2

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

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

Answer 3

我考虑了很多，并且认为我想出了另一个可以从父文档中解决问题的解决方案。而不是编辑iframe中的文档。但是由于交叉来源政策，我无法测试它。尝试一下，让我知道它是如何工作的。

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

希望这能为你做到。

编辑：此修复程序需要您删除onload =“”函数。

编辑-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（）”。

如何动态自动收缩iframe高度？

3 个答案: