How to auto shrink iframe height dynamically?

Question

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 one

Screenshot two:

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.

Duplicate [Your previous of the same question here](http://stackoverflow.com/questions/20495933/how-to-make-unwanted-white-space-shrink-in-webpage/20496181#20496181) This solution will work for you if you implement it correctly. — wrxsti, Dec 10 '13 at 21:05

Mina Hafzalla · Accepted Answer · 2013-12-12T09:38:59.027

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!

score 4 · Answer 2 · answered Mar 12 '14 at 20:18

4

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

answered Mar 12 '14 at 20:18

David Bradshaw

11,859
3
41
70

Thanks for you library. In the demo page when I resize the window faster then the iframe height is not correctly getting adjusted. If I resize slow then it does. Any clue? – VJAI Jun 22 '17 at 09:17
@VJAI not seen that before. Can you raise a ticket on github. – David Bradshaw Jun 22 '17 at 14:41

wrxsti · Answer 3 · 2013-12-11T13:47:39.370

1

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.

edited Dec 11 '13 at 13:47

answered Dec 10 '13 at 21:24

wrxsti

3,434
1
18
30

Thank you very much, I'm gonna try this now and come back with the result. – Mina Hafzalla Dec 10 '13 at 21:27
Unfortunately, it didn't work. I'm not sure if I'm implementing it in a right way, but I attached the "jquery-1.10.2.min.js" in the parent page, copied and pasted your code between the following tags – Mina Hafzalla Dec 10 '13 at 21:57
Actually it also cancel the dynamic height. – Mina Hafzalla Dec 10 '13 at 22:00
Hi again, it seems that I was inserting the code wrong. I'm sorry I was very tired. But it 100% works well now. Thank you very much for your help, I appreciate it. – Mina Hafzalla Dec 11 '13 at 10:08
Not a problem! Glad to help :) – wrxsti Dec 11 '13 at 12:22
The problem just fixed in chrome and appeared again but in **firefox**. It rather works on chrome or firefox, please see the [**page**](http://minvox.com/dedicated-servers/) and let me know if you have any solution to work on both browsers. (IE is working fine). Thank you in advance. – Mina Hafzalla Dec 11 '13 at 13:39
Edited the answer. That should hopefully fix your problem. – wrxsti Dec 11 '13 at 14:18
I inserted your code, the iframe appears for one second and then disappears. I left the code as it is in the page so that you can take a look on it. I also updated the question (update1). Thank you very much. – Mina Hafzalla Dec 11 '13 at 14:33
I think The problem was the `$` character before `(function(){`, I removed it. I'm sorry I'm not have much experience with jquery. I updated the page and removed the onload="resizeFrame()" but the iframe doesn't act dynamically. – Mina Hafzalla Dec 11 '13 at 15:19
I found nice code and it solved the problem. I posted it as an answer, please take a look on it. Thanks.. – Mina Hafzalla Dec 12 '13 at 09:33

How to auto shrink iframe height dynamically?

3 Answers3

Linked