Solved

change iFrame height from child function

Posted on 2004-10-28
1,834 Views
Last Modified: 2012-06-27
Can you change an iFrame height dimensions from a function with-in the child frame?

I am doing a page on my work intranet which is only updateable via an online tool which lets you write HTML (only within the <BODY> tags), but strips out any JavaScript.

I can however use small amounts of JavaScript using onload, onclick, onmouseover... elements etc...

So I have imbedded an iFrame on the page which is just a dynamic table, but because I don't know how long the table will be, it causes scrollbar to appear.

I tried to change this from the onload element of the iFrame by doing this:

<IFRAME onload="this.style.pixelHeight=this.scrollHeight;" style="OVERFLOW: auto; WIDTH: 100%;height:;" src="mytablehtml.asp" frameBorder=0></IFRAME>

But for some reason this does not work??

So I would like to include a function inside the child frame that will test how tall it is and tell it's parent to resize if possible.

*** OR ***

Would like to have my current method corrected if wrong.

Reg's
m8rix
0
Question by:m8rix
    9 Comments
     
    LVL 25

    Assisted Solution

    by:devic
    example:
    ======================
    <IFRAME name=myiframe onload="this.style.height=document.frames.myiframe.document.body.scrollHeight;"
    style="OVERFLOW: auto; WIDTH: 100%;height:;" src="child.html" frameBorder=0></IFRAME>
    0
     
    LVL 31

    Assisted Solution

    by:GwynforWeb
    you can detect the iframe height in a child and resize it, eg

    <IFRAME id="f" src="child.htm ">
    </IFRAME>

    then in child.htm

    <input type="button" onclick="if (parent.document.getElementById('f').height < 250) parent.document.getElementById('f').height=300">
    0
     
    LVL 10

    Author Comment

    by:m8rix
    Thanks for your comments guys, but both of these suggestions failed. I get an access denied error
    0
     
    LVL 25

    Assisted Solution

    by:devic
    you can not change iframe, if the iframe is not in the same domain
    0
     
    LVL 10

    Author Comment

    by:m8rix
    Thanks for that, my two pages are on different domains :(

    Is there any attributes you can get using:
    document.frames.myiframe.document.body.SomeAttribute

    I tried to read the innerHTML of the iFrame and got the same error.

    Also, because I created the page that is included in the iFrame, can I change the security of the page somehow to allow the parent to read it?
    0
     
    LVL 25

    Accepted Solution

    by:
    no way and forget all what beginns with "document." on foreign domain, because it's not your document.





    you can use XMLHTTP:
    =====================================
    <html>
    <body onload=init()>

    <center><h2>hello m8rix!</h2></center>
    <hr>
    <script>
    function LoadPage(theURL,theID)
    {


       var objSrvHTTP;
           objSrvHTTP = new ActiveXObject("Msxml2.XMLHTTP.4.0");
           objSrvHTTP.open ("GET",theURL,false);
           objSrvHTTP.send ("");

            document.getElementById(theID).innerHTML=objSrvHTTP.responseText;

    }

    function init()
    {
          LoadPage("http://www.yahoo.com","yahoo")
          LoadPage("http://www.ebay.com","ebay")
    }
    </script>
    <table width=555 cellspacing=0 cellpadding=0 border=3>
          <td valign=top id=yahoo></td>
          <td valign=top id=ebay></td>
    </table>

    </body>
    </html>
    0
     
    LVL 10

    Author Comment

    by:m8rix
    Thankyou... All comments made were very good. Thus leaving behind a great reference for the future.

    reg's
    m8rix
    0
     
    LVL 25

    Expert Comment

    by:devic
    thank you too!
    0
     
    LVL 31

    Expert Comment

    by:GwynforWeb
    thx :-)
    0

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Course: Foundations of Front-End Development

    Jump-start a lucrative career in front-end web development, with zero previous coding experience required. This course covers the basic programming concepts and languages required for creating engaging websites from scratch.

    In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
    This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
    The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
    The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

    857 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    18 Experts available now in Live!

    Get 1:1 Help Now