Getting information from an Iframe

**P-entertainment** · 05-26-2007 02:33 PM

I'm not sure if this goes here or in the HTML part but anyway:

I have a site made by four iframes. One for the menu, one for the logo, one for left side menu, and one for main content. The only problem is that I need to set the heigth of all the iframes to the heigth of the page inside the main iframe. For now I have only used the size of the biggest page, but this makes a nasty black space under the content. My boss seems to be really pissed of because of that black space, so please help. (sorry if pissed of is counted as course language, just reply here and I'l remove it)

**Fang** · 05-27-2007 01:48 AM

Just reference the iframe to determine or change it's height

**P-entertainment** · 05-27-2007 03:05 AM

How do i reference the iframe, I have just started learning Javascript so I don't really know much...

**Fang** · 05-27-2007 05:35 AM

This assumes the iframe has an id and name value

Reference to iframe: document.getElementById('iframeID').style.height='300px';

Reference to an element in the iframe document: iframeName.document.form1.select1.length;

Reference to a function in the iframe: iframeName.foo();

**P-entertainment** · 05-27-2007 05:38 AM

Thank you for this.

EDIT:
Hmm, still got some problems when I implent it:

Code:

<html>
<head>
<script language="JavaScript"><!--
function iframeh()
{
return showframe.document.form1.select1.length;
}
//--></script>
</head>
<body bgcolor=#000000>
<table border=0 width="100%">
<tr>
<td colspan=3>
<iframe frameborder="0" height="240" width="100%" src="logo.html" scrolling="no" align=top></iframe>
</td>
</td>
<tr>
<td height=iframeh()>
<iframe frameborder="0" src="menu.html" scrolling="no" height=100% width=100% align="right" marginheight="0" framespacing="0"></iframe>
</td>
<td height=iframeh() width="450">
<iframe frameborder="0" height="100%" width="100%" src="home.html" name="showframe" scrolling="no" align="center" marginheight="5" framespacing="0"></iframe>
</td>
<td height=iframeh()>
<iframe frameborder="0" src="affiliates.html" scrolling="no" height=100% width=100% marginheight="0" framespacing="0"></iframe>
</td>
</tr>
</table>
</body>
</html>

Full code^

**P-entertainment** · 05-31-2007 06:11 AM

Still need some help...

**Fang** · 05-31-2007 07:15 AM

Functions don't work like that.

Code:

<html>
<head>
<script type="text/javascript">
window.onload=function(){
var theHeight=0;
if (window.innerHeight)
	theHeight=showframe.document.height;
else if (document.documentElement && document.documentElement.clientHeight)
	theHeight=showframe.document.documentElement.clientHeight;
else if (document.body)
	theHeight=showframe.document.body.clientHeight;
var aTR=document.getElementsByTagName('tr')[1].getElementsByTagName('td');
for(var i=0; i<aTR.length; i++) {
  aTR[i].style.height=theHeight+"px";
  }
};
</script>
</head>
<body>
<body bgcolor="#000000">
<table border="0" width="100%">
<tr>
<td colspan="3">
<iframe frameborder="0" height="240" width="100%" src="logo.html" scrolling="no" align=top></iframe>
</td>
</td>
<tr>
<td>
<iframe frameborder="0" src="menu.html" scrolling="no" height=100% width=100% align="right" marginheight="0" framespacing="0"></iframe>
</td>
<td width="450">
<iframe frameborder="0" height="100%" width="100%" src="home.html" name="showframe" scrolling="no" align="center" marginheight="5" framespacing="0"></iframe>
</td>
<td>
<iframe frameborder="0" src="affiliates.html" scrolling="no" height=100% width=100% marginheight="0" framespacing="0"></iframe>
</td>
</tr>
</table>
</body>
</html>

**P-entertainment** · 05-31-2007 08:42 AM

That don't work either...

BTW: I have activated scripts.

**P-entertainment** · 06-06-2007 06:07 AM

I need to fix this in 24 hours so please help...

**P-entertainment** · 06-06-2007 07:28 AM

now I have this:

Code:

<html>
<body bgcolor=#000000>
<table border=0 width="100%">
<tr>
<td colspan=3>
<iframe frameborder="0" height="240" width="100%" src="logo.html" scrolling="no" align=top></iframe>
</td>
</td>
<tr>
<td height=200>
<iframe frameborder="0" src="menu.html" scrolling="no" height=100% width=100% align="right" marginheight="0" framespacing="0"></iframe>
</td>
<td height=200 width="450">
<iframe frameborder="0" height="100%" width="100%" src="home.html" id="showframe" name="showframe" scrolling="auto" align="center" marginheight="5" framespacing="0"></iframe>
</td>
<td height=200>
<iframe frameborder="0" src="affiliates.html" scrolling="no" height=100% width=100% marginheight="0" framespacing="0"></iframe>
</td>
</tr>
</table>
<script language="JavaScript" type="text/javascript">
<!--
document.getElementById('showframe').style.height=document.getElementById('showframe').contentDocument.height
//-->
</script>
</body>
</html>

This gives me an error message. Because the contentDocument doesn't work(or I doesn't know how to use it...) Can anyone help me here?

**Fang** · 06-06-2007 10:02 AM

Code:

window.onload=function() {
document.getElementById('showframe').style.height=showframe.document.body.scrollHeight+"px" ;
}

Thread: Getting information from an Iframe

Thread Tools

Display

Getting information from an Iframe

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions