www.webdeveloper.com
Results 1 to 11 of 11

Thread: Getting information from an Iframe

  1. #1
    Join Date
    Mar 2007
    Posts
    22

    Getting information from an Iframe

    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)

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Just reference the iframe to determine or change it's height
    At least 98% of internet users' DNA is identical to that of chimpanzees

  3. #3
    Join Date
    Mar 2007
    Posts
    22
    How do i reference the iframe, I have just started learning Javascript so I don't really know much...

  4. #4
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    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();
    At least 98% of internet users' DNA is identical to that of chimpanzees

  5. #5
    Join Date
    Mar 2007
    Posts
    22
    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^
    Last edited by P-entertainment; 05-27-2007 at 05:52 AM. Reason: Still need help

  6. #6
    Join Date
    Mar 2007
    Posts
    22
    Still need some help...

  7. #7
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    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>
    At least 98% of internet users' DNA is identical to that of chimpanzees

  8. #8
    Join Date
    Mar 2007
    Posts
    22
    That don't work either...

    BTW: I have activated scripts.
    Last edited by P-entertainment; 05-31-2007 at 08:44 AM.

  9. #9
    Join Date
    Mar 2007
    Posts
    22
    I need to fix this in 24 hours so please help...

  10. #10
    Join Date
    Mar 2007
    Posts
    22
    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?

  11. #11
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Code:
    window.onload=function() {
    document.getElementById('showframe').style.height=showframe.document.body.scrollHeight+"px" ;
    }
    At least 98% of internet users' DNA is identical to that of chimpanzees

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles