可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

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.

Here is my Page

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.

回答1:

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!

回答2:

I wrote a little library that deals with all these issues and keeps the iframed sized when the content changes or the browser window is resized.

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

回答3:

I thought about it quite a bit, and think I came up with another solution that may resolve your problem from the parent document. Rather than editing the documents in your iframe. However I can't test it due to cross origin policy. Try this out and let me know how it works.

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

Hope this does it for you.

Edit: This fix would require you to remove the onload="" function.

Edit-2: You seem to have combined the two scripts. You have this:

  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 );
});
  }

Replace that entire script with this:

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

And remove the onload="resizeFrame()" from the iframes tag.