如何动态自动收缩iframe高度？
Min*_*lla 3 html javascript css iframe jquery
我使用以下代码来实现动态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工作正常.
我想知道如何让这段代码在减少时自动收缩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 );
});
});
iframe中的iframe代码 <body>
<iframe name="dservers" src="dual_core.html" width="100%" frameborder="0"
scrolling="no" /></iframe>
iframe未显示在页面中.它出现一秒然后消失.
更新2
我认为问题是$之前的角色(function(){,我删除了它.对不起,我对jquery没有多少经验.我更新了页面并删除了,onload="resizeFrame()"但iframe现在没有动态动作.
问题解决了
我正在挖掘互联网,我发现一个代码为我解决了整个问题.我想分享它,所以任何人都可以使用它来获得动态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>
二,Iframe代码<body>:
<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).
祝你有美好的一天!