Log in

View Full Version : Auto resizing an iframe to fit its contents


bojomojo
12-07-2008, 09:33 AM
I need to the iframe to autoresize according to the hight of its content, is that possible?
Snookerman
12-07-2008, 11:57 AM
This can be done with 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. */
}

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

Credit to marsyas (http://www.frontpagewebmaster.com/m-89000/tm.htm#225192).
bojomojo
12-07-2008, 12:07 PM
will this work if the src of the iframe is from another domain?
Schmoopy
12-07-2008, 12:18 PM
Yes, it will resize the iframe on your page according to how big the other page is.
bojomojo
12-07-2008, 12:38 PM
it is not working, nothing differs
Snookerman
12-07-2008, 12:43 PM
Can you please post a link to your site, or attach the code to the page and the iframe?
bojomojo
12-07-2008, 12:47 PM
Page:

<!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:


<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, 12:52 PM
Might be this:

<body id="framePage" onload="resizeIframe('iframeID')" >
bojomojo
12-07-2008, 12:54 PM
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, 12:57 PM
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.
bojomojo
12-07-2008, 01:01 PM
did that, still nothing
Snookerman
12-07-2008, 01:10 PM
Alright, I'm on it. I'll make my own and try to make it work. Give me 10 minutes.
bojomojo
12-07-2008, 01:16 PM
take all the time you need:)
Snookerman
12-07-2008, 01:33 PM
Progress made: got it to work in IE, FF won't listen yet. I'll attach the three files as .txt files because I can't attach .html files. Just remove the .txt suffix and try it out:
2288
2289
2290

Looking at the instructions (/* Sniffs for IE5+.*/) maybe this is made to work in IE only. Javascript is not really my thing so maybe someone can look at this script and make it work in other browsers.
bojomojo
12-07-2008, 01:46 PM
ok will try it now, but i need something else, a lil thing:D:

i need to know who to make 4 example: dotmain.com/file.php?=www.google.com points to google.com??

what should the file.php contents be? i assume there are ready made scripts for that.. any help
Snookerman
12-07-2008, 02:19 PM
I'm not much of a php whiz either but I think it should look like this:

<?php

echo $redirect;
header ("Location: $redirect");

?>
And the url:
index.php?redirect=www.google.com

Try it out and tell me if it works.
Snookerman
12-07-2008, 04:56 PM
Back to the iframe problem, take a look at this script:

http://www.dynamicdrive.com/dynamicindex17/iframessi2.htm (http://www.dynamicdrive.com/dynamicindex17/iframessi2.htm)

BTW, did the php redirect work?
molendijk
12-07-2008, 10:58 PM
Did you try this one (http://www.dynamicdrive.com/dynamicindex17/iframessi2.htm)?
===
Arie Molendijk.
Snookerman
12-08-2008, 06:30 AM
nvm..
bojomojo
12-08-2008, 08:08 AM
the php thing i am using for something complex, it should work as a redirect.. but i am using it to pipe an email from cpanel to a script on another domain, so it didnt work..

cPanel has a limitation that the piped script should be on the same account S:
bojomojo
12-08-2008, 08:11 AM
now the problem is i need one to include external pages from another domain :D both are mine, but hosted under different account names
Snookerman
12-10-2008, 12:38 PM
Are you able to edit the external pages?
bojomojo
12-10-2008, 01:36 PM
yes, I am able to edit all pages.
Snookerman
12-10-2008, 01:58 PM
So there shouldn't be any problem, right?
bojomojo
12-10-2008, 03:07 PM
the problem is it doesnt work when the files are on another domain, thats written everywhere and it doesnt work with ff
adrevol
01-25-2011, 07:10 AM
In resizing the IFrame Content There are Two Scenario's

1. when pages are in same domain
2. when pages are in different domain


Hope this article will solve the problem ..

http://www.ittreats.com/os/javascript/auto-resizing-iframe-height-in-the-page.html

Still if you see any difficulty i m ready to help you out.