问题描述
我使用以下代码实现动态iframe height：
在< head& code>：
< script language =javascripttype =text / javascript>
function resizeIframe（obj）{
obj.style.height = obj.contentWindow.document.body.scrollHeight +'px';
}
< / script>
在< body> ：
< iframe name =myiframesrc =somepage.htmlwidth =100％frameborder =0
scrolling =noonload ='javascript：resizeIframe（this）;'/>
< / iframe>
此代码只适用于高度增加。因此，当iframe中的内容高度增加时，iframe会更新其高度并随之增加。
问题是高度减少或缩小。当iframe中的内容减少时，它不会减少，并导致大的不必要的空白。这只会发生在 Chrome ，IE& FF工作正常。
页
我想知道如何使此代码在自动缩减iframe高度时减少？
截图一：
截图二：
更新1
我将以下代码放在< head>
< script src =jquery-1.10.2.min.js>< / script&
< script language =javascripttype =text / javascript>
$（function（）{
var iframeDoc = $（'iframe [name =dservers]'）。contents（）。get（0）;
$（'iframe [name =dservers]'）。load（function（）{
docHeight = $（iframeDoc）.height（）;
$（'iframe [name =dservers ）;
}）;
}）;
iframe代码< body>
< iframe name =dserverssrc = dual_core.htmlwidth =100％frameborder =0
scrolling =no/>< / iframe>
iframe未显示在页面中。它会显示一秒钟，然后消失。
更新2
$ b
我想问题是之前的我删除它，我很抱歉我没有太多的经验与jquery我更新了页面，并删除 $ 字符（function（）{ onload =resizeFrame（）但iframe doesn'
问题解决
我在网上挖，我发现一个代码解决了整个问题，我想分享它，任何人都可以使用它，以获得动态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 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 =myiframeidname =myiframenamesrc = somepage.htmlwidth =100％
frameborder =0scrolling =noonload ='javascript：setIframeHeight（this.id）;'/>
< / iframe>
第三和最后，CSS：
#myiframeid {
width：100％;
}
注意：您应该
兼容所有浏览器（ Chrome 和 Firefox ， IE ）。
有一个愉快的一天！
I use the following code to achieve dynamic iframe height:
In the <head>:
<script language="javascript" type="text/javascript">
function resizeIframe(obj) {
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
</script>
In the <body>:
<iframe name="myiframe" src="somepage.html" width="100%" frameborder="0"
scrolling="no" onload='javascript:resizeIframe(this);' />
</iframe>
This codes works fine with height increasing only. So, when the content inside the iframe increases in height, the iframe updates its height and increases with it.
The problem is with height decreasing or shrinking. When the content inside the iframe decreases, it doesn't decrease and causing big unwanted white space. This only occurs in Chrome, IE & FF works fine.
I want to know how to make this code works to auto shrink iframe height when it decreases?
Screenshot one:
Screenshot two:
Update 1
I placed the following code in the <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 );
});
});
The iframe code in the <body>
<iframe name="dservers" src="dual_core.html" width="100%" frameborder="0"
scrolling="no" /></iframe>
The iframe not showing in the page. It appears for one second and then disappears.
Update 2
I think The problem was the $ character before (function(){, I removed it. I'm sorry I don't have much experience with jquery. I updated the page and removed the onload="resizeFrame()" but the iframe doesn't act dynamically now.
Problem Solved
I was digging in the internet and I found a code solved the whole problem for me. I would like to share it so anyone can use it in order to get dynamic iframe height.
First, put the following code between the <head> tags:
<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>
Second, the Iframe code in the <body> :
<iframe id="myiframeid" name="myiframename" src="somepage.html" width="100%"
frameborder="0" scrolling="no" onload='javascript:setIframeHeight(this.id);' />
</iframe>
Third and Last, the CSS:
#myiframeid{
width: 100%;
}
Note: You should have Name and ID for the Iframe.
Compatible with all browsers (Chrome, Firefox, IE).
Have a good day!
这篇关于如何自动缩减iframe高度动态？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！