Auto resizing an iframe to fit its contents

**bojomojo** · 12-07-2008, 08:33 AM

I need to the iframe to autoresize according to the hight of its content, is that possible?

**Snookerman** · 12-07-2008, 10:57 AM

This can be done with javascript:

Code:

function resizeIframe(iframeID) {
if(self==parent) return false; /* Checks that page is in iframe. */
else if(document.getElementById&&document.all) /* Sniffs for IE5+.*/

var FramePageHeight = framePage.scrollHeight + 10; /* framePage
is the ID of the framed page's BODY tag. The added 10 pixels prevent an
unnecessary scrollbar. */

parent.document.getElementById(iframeID).style.height=FramePageHeight;
/* "iframeID" is the ID of the inline frame in the parent page. */
}

HTML Code:

<body id="framePage" onload="resizeIframe('idTopFrame')">

Credit to marsyas.

**bojomojo** · 12-07-2008, 11:07 AM

will this work if the src of the iframe is from another domain?

**Schmoopy** · 12-07-2008, 11:18 AM

Yes, it will resize the iframe on your page according to how big the other page is.

**bojomojo** · 12-07-2008, 11:38 AM

it is not working, nothing differs

**Snookerman** · 12-07-2008, 11:43 AM

Can you please post a link to your site, or attach the code to the page and the iframe?

**bojomojo** · 12-07-2008, 11:47 AM

Page:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>


<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test Iframe Page</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>


<body>
<iframe id="iframeID" src="http://domain.com/?group=testtemplate" width="100%"></iframe>

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

Iframe:

Code:

<html>
<head>

<script type="text/javascript">
function resizeIframe(iframeID) { 
if(self==parent) return false; /* Checks that page is in iframe. */ 
else if(document.getElementById&&document.all) /* Sniffs for IE5+.*/ 

var FramePageHeight = framePage.scrollHeight + 10; /* framePage 
is the ID of the framed page's BODY tag. The added 10 pixels prevent an 
unnecessary scrollbar. */ 

parent.document.getElementById(iframeID).style.height=FramePageHeight; 
/* "iframeID" is the ID of the inline frame in the parent page. */ 
} 
</script>
</head>
<body id="framePage" onload="resizeIframe('iframeID')" >
Content Here
</body>
</html>

**Snookerman** · 12-07-2008, 11:52 AM

Might be this:

Code:

<body id="framePage" onload="resizeIframe('iframeID')" >

**bojomojo** · 12-07-2008, 11:54 AM

i fixed this before you reply, and still doesnt work.

Please look and make sure the JS is in the right page and the page onload is on the right one, i got confused which goes to the parent page and which to the framed page

**Snookerman** · 12-07-2008, 11:57 AM

Yeah same here. I think that the javascript code should be on the main page, not in the iframe. Try that and see what happens.

Thread: Auto resizing an iframe to fit its contents

Thread Tools

Search Thread

Auto resizing an iframe to fit its contents

Bookmarks

Bookmarks

Posting Permissions