jQuery get height of iframes source.

**keyboard** · 01-05-2013, 10:18 AM

Greetings all!
I'm trying to get the height of the source of an iframe, so that I can resize the iframe so that it fits this...

I've tried using

Code:

$('#forum_iframe').contents().height()+'px';

But this won't work in FF for some reason...
Any suggestions?

**molendijk** · 01-05-2013, 11:46 AM

I haven't tried yet to do it with jQuery, but this is an alternative.

**Beverleyh** · 01-05-2013, 12:13 PM

This auto-height Iframe plugin for jQuery might be useful, if only to investigate their method : https://github.com/Sly777/Iframe-Height-Jquery-Plugin

**molendijk** · 01-05-2013, 04:14 PM

The plugin seems to work alright, but I don't see an animated version. Does jQuery haved something like this or this? I made them some time ago.

**keyboard** · 01-07-2013, 08:16 AM

I looked at both your suggestions... then I remembered a bit of information that I forgot -

With the code I posted, or this code -

Code:

function changeHeight(iframe) {
	try {
		iframe = document.getElementById(iframe);
		var innerDoc = (iframe.contentDocument) ? iframe.contentDocument : iframe.contentWindow.document;
		if (innerDoc.body.offsetHeight) {
			/*iframe.height = */alert(innerDoc.body.offsetHeight + 32); //Extra height FireFox
		} else if (iframe.Document && iframe.Document.body.scrollHeight) {
			/*iframe.height = */alert(iframe.Document.body.scrollHeight);
		}
	}
	catch(err) {
		alert(err.message);
	}
}

It's only Firefox that will not alert it correctly. HOWEVER - Sometimes it does work, normally on the first page load... Does this suggest anything?

**jscheuer1** · 01-07-2013, 11:36 AM

First off, Firefox often will not cross script locally. So it needs to be tested on a server or virtual server like XAMP, WAMP, etc.

Second, using the iframe as an element is the hard way. If you use it as a window, it's document is window_reference.document in all browsers, so none of that testing business that's required when the iframe is used as an element. The only trick is obtaining the reference to the iframe which corresponds to it as a window in such a way that all browsers agree upon it. I believe that's by number. So, let's say it's the only iframe on the page:

Code:

alert(jQuery(window.frames[0].document).height());

should do it (untested).

The other way of obtaining a reference to the iframe as a window is by it's name attribute. So let's say you have an iframe with a name attribute of "myframe":

Code:

alert(jQuery(window.frames['myframe'].document).height());

But I think the number method is more cross browser.

Now of course you have to wait until the onload event of the iframe has fired before checking for this, so assuming the first scenario (by number), this might be fun playing with to see how it works out:

Code:

jQuery(function($){
	var $iframe = $('iframe').eq(0);
	$iframe.load(function(){
		$iframe.animate({height: $(window.frames[0].document).height()}, 600);
	});
	$iframe.data('load', function(){$iframe.trigger('load');});
});

The last line simply creates a reference in case you want to fire the load function manually with a button or link:

Code:

$('#mybutton').click($('iframe').eq(0).data('load'));

All of this is untested though, and knowing jQuery visa vis straight javascript like I do, in this sort of situation, more of the duties might have to be carried out in ordinary javascript.

**jscheuer1** · 01-07-2013, 12:38 PM

I tried it out. It needed some tweaks. This worked in limited testing:

Code:

<!DOCTYPE html>
<html>
<head>
<title>jQuery Resize Iframe</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($){
	var $iframe = $('iframe').eq(0), ie = (function(){var ie; return (ie = /MSIE (\d+)/.exec(navigator.userAgent)) && ie[1] < 9 ? 5 : 0;})();
	$iframe.load(function(){
		$iframe.animate({height: $(window.frames[0].document.body).outerHeight(true) + ie}, 600);
	});
	$iframe.data('load', function(){$iframe.trigger('load');});
	ie && $(window).load($iframe.data('load'));
});
</script>
</head>
<body>
<iframe name="myframe" src="frame1.htm" width="300" height="300" scrolling="auto" frameborder="1"></iframe><br>
<a href="frame1.htm" target="myframe">Frame1</a><br>
<a href="frame2.htm" target="myframe">Frame2</a><br>
</body>
</html>

**molendijk** · 01-07-2013, 01:09 PM

Hi Keebs,
Your code produces the correct alerts on my machine (using FF), but doesn't seem to correctly resize the iframes. If you just want a simple script that works (no animation), you can do this:
main.html:

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Setting Iframe Element Height to Iframe Content Height</title>



<script>
/* free code from dyn-web.com */

function getDocHeight(doc) {
doc = doc || document;
// from http://stackoverflow.com/questions/1145850/get-height-of-entire-document-with-javascript
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(id) {
var ifrm = document.getElementById(id);
var doc = ifrm.contentDocument? ifrm.contentDocument: ifrm.contentWindow.document;
ifrm.style.visibility = 'hidden';
ifrm.style.height = "10px"; // reset to minimal height in case going from longer to shorter doc
ifrm.style.height = getDocHeight( doc ) + 5+"px";
ifrm.style.visibility = 'visible';
}
</script>

</head>
<body ><div style="position: relative; margin: auto; width:100%">


<h1 style="margin-top: 10px; text-align: center">Setting Iframe Element Height to Iframe Content Height</h1>

<div style="position: relative; text-align: center; margin-bottom:10px">
<a href="javascript: void(0)" onclick="frames.some_name.location.replace('page1.html'); return false">page 1</a>
<a href="javascript: void(0)" onclick="frames.some_name.location.replace('page2.html'); return false">page 2</a>
<a href="javascript: void(0)" onclick="frames.some_name.location.replace('page3.html'); return false">page 3</a>
</div>

<div  style="position: relative; margin: auto; width:400px; background:white; border: 1px solid black">
<iframe id="some_id" name="some_name" src="page1.html" style="width:100%; text-align: center" frameborder="0" scrolling="no" onload="setIframeHeight(this.id)"></iframe>
</div>

</div></body>
</html>

page1.html (first iframe):

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>

</head>

<body style="font-family: verdana; font-size:12px; "><div>

<h2 style="text-align: center">PAGE 1<br>The height of this iframe is auto-adjusted to its content's height</h2>
<div style="text-align: center">
<a href="javascript: void(0)" onclick="parent.frames.some_name.location.replace('page1.html'); return false">page 1</a>
<a href="javascript: void(0)" onclick="parent.frames.some_name.location.replace('page2.html'); return false">page 2</a>
<a href="javascript: void(0)" onclick="parent.frames.some_name.location.replace('page3.html'); return false">page 3</a>
</div>

<br>The dog (Canis lupus familiaris), is a domesticated subspecies of the Gray Wolf, a member of the Canidae family of the order Carnivora. <br><br>The term is used for both feral and pet varieties. <br><br>The domestic dog has been one of the most widely kept working and companion animals in human history. 
</div></body>

</html>

page2.html (second iframe):

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>

</head>

<body style="font-family: verdana; font-size:12px; "><div>

<h2 style="text-align: center">PAGE 2<br>The height of this iframe is auto-adjusted to its content's height</h2>
<div style="text-align: center">
<a href="javascript: void(0)" onclick="parent.frames.some_name.location.replace('page1.html'); return false">page 1</a>
<a href="javascript: void(0)" onclick="parent.frames.some_name.location.replace('page2.html'); return false">page 2</a>
<a href="javascript: void(0)" onclick="parent.frames.some_name.location.replace('page3.html'); return false">page 3</a>
</div>

<br>The dog (Canis lupus familiaris), is a domesticated subspecies of the Gray Wolf, a member of the Canidae family of the order Carnivora. <br><br>The term is used for both feral and pet varieties. <br><br>The domestic dog has been one of the most widely kept working and companion animals in human history. <BR><BR>

<br>The dog (Canis lupus familiaris), is a domesticated subspecies of the Gray Wolf, a member of the Canidae family of the order Carnivora. <br><br>The term is used for both feral and pet varieties. <br><br>The domestic dog has been one of the most widely kept working and companion animals in human history. <BR><BR>

<br>The dog (Canis lupus familiaris), is a domesticated subspecies of the Gray Wolf, a member of the Canidae family of the order Carnivora. <br><br>The term is used for both feral and pet varieties. <br><br>The domestic dog has been one of the most widely kept working and companion animals in human history. 
</div></body>

</html>

page3.html (third iframe)

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>

</head>

<body style="font-family: verdana; font-size:12px; "><div>

<h2 style="text-align: center">PAGE 3<br>The height of this iframe is auto-adjusted to its content's height</h2>
<div style="text-align: center">
<a href="javascript: void(0)" onclick="parent.frames.some_name.location.replace('page1.html'); return false">page 1</a>
<a href="javascript: void(0)" onclick="parent.frames.some_name.location.replace('page2.html'); return false">page 2</a>
<a href="javascript: void(0)" onclick="parent.frames.some_name.location.replace('page3.html'); return false">page 3</a>
</div>

<br>The dog (Canis lupus familiaris), is a domesticated subspecies of the Gray Wolf, a member of the Canidae family of the order Carnivora. <br><br>The term is used for both feral and pet varieties. <br><br>The domestic dog has been one of the most widely kept working and companion animals in human history.<BR><BR> 

<br>The dog (Canis lupus familiaris), is a domesticated subspecies of the Gray Wolf, a member of the Canidae family of the order Carnivora. <br><br>The term is used for both feral and pet varieties. <br><br>The domestic dog has been one of the most widely kept working and companion animals in human history.<BR><BR> 


<br>The dog (Canis lupus familiaris), is a domesticated subspecies of the Gray Wolf, a member of the Canidae family of the order Carnivora. <br><br>The term is used for both feral and pet varieties. <br><br>The domestic dog has been one of the most widely kept working and companion animals in human history.<BR><BR> 


<br>The dog (Canis lupus familiaris), is a domesticated subspecies of the Gray Wolf, a member of the Canidae family of the order Carnivora. <br><br>The term is used for both feral and pet varieties. <br><br>The domestic dog has been one of the most widely kept working and companion animals in human history.<BR><BR> 


<br>The dog (Canis lupus familiaris), is a domesticated subspecies of the Gray Wolf, a member of the Canidae family of the order Carnivora. <br><br>The term is used for both feral and pet varieties. <br><br>The domestic dog has been one of the most widely kept working and companion animals in human history.<BR><BR> 


<br>The dog (Canis lupus familiaris), is a domesticated subspecies of the Gray Wolf, a member of the Canidae family of the order Carnivora. <br><br>The term is used for both feral and pet varieties. <br><br>The domestic dog has been one of the most widely kept working and companion animals in human history.

</div></body>

</html>

Tested and working with all modern browsers. (IE and Chrome only handle this well online).

**molendijk** · 01-07-2013, 05:37 PM

For some reason, I hadn't noticed John's script when I submitted my last post.
It's a very nice script. I tested it in IE (down to IE7), Firefox, Google Chrome, Opera and Safari. The results were fine with each browser.
I would suggest 2 modifications though:

Code:

<iframe scrolling="no" ...

and:

Code:

document.body).outerHeight(true) + 5 + ie}, 600

**keyboard** · 01-07-2013, 09:55 PM

Thanks for all those responses everyone!
Thanks for that suggestion John, I'll use that method to retrieve the height instead!

As for your post Arie, sometimes on my machine it works, others it doesn't.... Maybe it's just a problem with my computer. And yes, I know it won't resize, I commented that bit out of my code for testing purposes...

I think scrolling="no" is now depricated, and you have to use css instead... but point taken!

Thanks for all the help guys... I'll try it all out later this afternoon and see how I go