HTML and CSS

Dynamic Iframe for External Domain

Please support our HTML and CSS advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

Thread Solved

•

Join Date: Jan 2009

Posts: 68

Reputation: jonow is an unknown quantity at this point

Solved Threads: 0

jonow

Offline

Junior Poster in Training

Dynamic Iframe for External Domain

Mar 7th, 2009

I have been looking everywhere for a piece of code that made the height of an iframe auto adjusts while showing contentment from an external domain. (ex: my domain mydomain.com showing google.com). I need a script that does that

Or something that may be harder is that it counts the number of divs with a certain id and multiplies that my a number to make the iframe height, Possible?

Thank You

•

Join Date: Sep 2008

Posts: 178

Reputation: FlashCreations is an unknown quantity at this point

Solved Threads: 13

FlashCreations FlashCreations is offline

Offline

Junior Poster

Re: Dynamic Iframe for External Domain

Mar 7th, 2009

Probably not, there is no simple way (or any way at all for that matter) to determine content height unless it is a style on the page (Ex. something like maybe:

 Help with Code Tags 
 CSS Syntax (Toggle Plain Text) 
.myDivThatIWantTheHeightFrom {
 height: 50px;
}
.myDivThatIWantTheHeightFrom {
 height: 50px;
}

I'm not sure though even in that case if you could determine height.

FlashCreations
(aka PhpMyCoder)

About Me | My Blog | Contact Me

•

Join Date: Jan 2009

Posts: 68

Reputation: jonow is an unknown quantity at this point

Solved Threads: 0

jonow

Offline

Junior Poster in Training

Re: Dynamic Iframe for External Domain

Mar 7th, 2009

So are you saying that lets say these is a div that is set to 50 px through css in the external domain i can make the iframe that height?

•

Join Date: Sep 2008

Posts: 178

Reputation: FlashCreations is an unknown quantity at this point

Solved Threads: 13

FlashCreations FlashCreations is offline

Offline

Junior Poster

Re: Dynamic Iframe for External Domain

Mar 7th, 2009

Yes simply add the height property to the iframe like so:

 Help with Code Tags 
 HTML Syntax (Toggle Plain Text) 
<iframe src="http://externaldomain.com" height="50"></iframe>
<iframe src="http://externaldomain.com" height="50"></iframe>

Now that I think about it, there might be a JavaScript fix that could help, but I'm not sure it would work, nor would it work everywhere.

Last edited by FlashCreations; Mar 7th, 2009 at 7:58 pm. Reason: OCD me rewriting something that sounds off

FlashCreations
(aka PhpMyCoder)

About Me | My Blog | Contact Me

•

Join Date: Jan 2009

Posts: 68

Reputation: jonow is an unknown quantity at this point

Solved Threads: 0

jonow

Offline

Junior Poster in Training

Re: Dynamic Iframe for External Domain

Mar 8th, 2009

No but i want to do it dynamically so when a new page loads it loads to that height.

•

Join Date: Jan 2009

Posts: 1,325

Reputation: almostbob has a spectacular aura about

Solved Threads: 161

almostbob

Offline

Nearly a Posting Virtuoso

Re: Dynamic Iframe for External Domain

Mar 8th, 2009

do it ANother way
frameset instead of iframe
this is a file 'external.php' that we use to load outside files under a little header that says external file and a menu the file takes a parameter $ext that is the file to load

 Help with Code Tags 
 php Syntax (Toggle Plain Text) 
<?php ob_start('ob_gzhandler'); ?>
<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Frameset//EN' 'http://www.w3.org/TR/html4/frameset.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
<Title>Linking <?php if(!$ext){$ext = '/home2.php';} echo $ext ; ?></Title>
<LINK rel='StyleSheet' HREF='/style.css.php' TYPE='text/css' MEDIA='all'>
<script language='javascript' type='text/javascript' src='/script.js.php'></script>
<frameset rows='100,*'>
<frame name='Menu' SRC='menu2.php' TITLE='Menu'>
<frame name='Content' SRC='<?php echo $ext; ?>' TITLE='Content'>
</FRAMESET>
</body>
</html>
<?php ob_flush(); ?>
<?php ob_start('ob_gzhandler'); ?>
<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Frameset//EN' 'http://www.w3.org/TR/html4/frameset.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
<Title>Linking <?php if(!$ext){$ext = '/home2.php';} echo $ext ; ?></Title>
<LINK rel='StyleSheet' HREF='/style.css.php' TYPE='text/css' MEDIA='all'>
<script language='javascript' type='text/javascript' src='/script.js.php'></script>
<frameset rows='100,*'>
<frame name='Menu' SRC='menu2.php' TITLE='Menu'>
<frame name='Content' SRC='<?php echo $ext; ?>' TITLE='Content'>
</FRAMESET>
</body>
</html>
<?php ob_flush(); ?>

(stylesheets and javascripts are .php files, mod_gzip.)

Last edited by almostbob; Mar 8th, 2009 at 3:20 pm.

Failure is not an option It's included free
If at first you dont succeed, join the club
Of course its always in the last place you look, you dont keep looking after you find it

Please mark solved problems, solved

•

Join Date: Sep 2008

Posts: 178

Reputation: FlashCreations is an unknown quantity at this point

Solved Threads: 13

FlashCreations FlashCreations is offline

Offline

Junior Poster

Re: Dynamic Iframe for External Domain

Mar 8th, 2009

And that's exactly what I'm saying. It could be done with JavaScript but it won't be compatible everywhere and there's no guarantee it will work. It would be something like this...

 Help with Code Tags 
 HTML Syntax (Toggle Plain Text) 
<html>
<head><titleDynamic iFrame Height</title>
<script type='text/javascript'>
var divName = 'testDiv'; //ID of the div you want to adjust height for
function dynamicIframe(name)
{
 if(name=='') name = divName;
 document.getElementById('iFrame').style.height = document.getElementById('iFrame').document.getElementById(name).style.height;
}
</script>
</head>
<body>
<iframe src="thispage.html" height="100" width="100%"  id="iFrame" onload="javascript:dynamicIframe();"></iframe>
</body>
</html>
<html>
<head><titleDynamic iFrame Height</title>
<script type='text/javascript'>
var divName = 'testDiv'; //ID of the div you want to adjust height for
function dynamicIframe(name)
{
 if(name=='') name = divName;
 document.getElementById('iFrame').style.height = document.getElementById('iFrame').document.getElementById(name).style.height;
}
</script>
</head>
<body>
<iframe src="thispage.html" height="100" width="100%"  id="iFrame" onload="javascript<b></b>:dynamicIframe();"></iframe>
</body>
</html>

Simply replace divName with the name of the tag you would like to adjust height of iFrame for.