Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts

    Making an IFRAME's height variable based on the height of the page loaded into it

    I was recently desperately looking for a method of making my IFRAME's height variable based on the height of the page loaded into it, because it was cutting off the tables i had loading into it... and like a gift from god, jfreak53 posted this for me. I figured i'd share it publically so that everyone could use it if needed.

    Cheers,
    -- Jameson


    Quote Originally Posted by jfreak53
    Ok, this took me almost all night to find on the net, but I found a site that had this in JavaScript, here it is:

    In the main page that has the Iframe you put this:

    <script type="text/javascript">
    /*************************************************************************
    This code is from Dynamic Web Coding at http://www.dyn-web.com/
    See Terms of Use at http://www.dyn-web.com/bus/terms.html
    regarding conditions under which you may use this code.
    This notice must be retained in the code as is!
    *************************************************************************/

    function getDocHeight(doc) {
    var docHt = 0, sh, oh;
    if (doc.height) docHt = doc.height;
    else if (doc.body) {
    if (doc.body.scrollHeight) docHt = sh = doc.body.scrollHeight;
    if (doc.body.offsetHeight) docHt = oh = doc.body.offsetHeight;
    if (sh && oh) docHt = Math.max(sh, oh);
    }
    return docHt;
    }

    function setIframeHeight(iframeName) {
    var iframeWin = window.frames[iframeName];
    var iframeEl = document.getElementById? document.getElementById(iframeName): document.all? document.all[iframeName]: null;
    if ( iframeEl && iframeWin ) {
    iframeEl.style.height = "auto"; // helps resize (for some) if new doc shorter than previous
    var docHt = getDocHeight(iframeWin.document);
    // need to add to height to be sure it will all show
    if (docHt) iframeEl.style.height = docHt + 30 + "px";
    }
    }

    function loadIframe(iframeName, url) {
    if ( window.frames[iframeName] ) {
    window.frames[iframeName].location = url;
    return false;
    }
    else return true;
    }
    </script>

    That goes in the head of the doc, then this is put in every link, like this, example:

    <a href="doc.html" onclick="return loadIframe('main', this.href)">

    The onclick is the thing that reloads the doc and tells it what name of iframe to use, but I have found out this onclick is not necesary, just use the normal target="framename", now in each document that you want to load inside the iframe:

    <script type="text/javascript">
    function goSetHeight() {
    if (parent == window) return;
    // arg: id of iframe element this doc is to be loaded into
    else parent.setIframeHeight('main');
    }
    </script>

    That's inside the head part of the docs then this is added to the body part like this:

    <body onload="goSetHeight()">
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #2
    Regular Coder
    Join Date
    Jul 2002
    Posts
    698
    Thanks
    0
    Thanked 0 Times in 0 Posts
    one is of the assumption that you got an iframe tag in which case it would be easier just setting that tags onload event than adding code to every single document loaded in it

  • #3
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    ahh but you see my good sir, while the logic is true... the application of said logic fails in practice. setting the iframe height="100%" does not actually work, as while it does set it to 100% of the page you see, if the page being loaded into it is more than 100% of the page you see, it cuts it off.

    odd, but true. give it a shot.

    oh, and your sphere3d post url doesnt work
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #4
    WA
    WA is offline
    Administrator
    Join Date
    Mar 2002
    Posts
    2,596
    Thanks
    2
    Thanked 19 Times in 18 Posts
    You should also take a look at the following two scripts, which auto resize an iframe's height to be that of the content contained within:

    Iframe SSI script
    Iframe SSI script 2
    - George
    - JavaScript Kit- JavaScript tutorials and 400+ scripts!
    - JavaScript Reference- JavaScript reference you can relate to.

  • #5
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    hmm, funfun.

    would this script be more compatible than the one i'm using, or be prone to less errors?

    i.e should i switch scripts?
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #6
    Regular Coder
    Join Date
    Jul 2002
    Posts
    698
    Thanks
    0
    Thanked 0 Times in 0 Posts
    didn't say anything about setting it to 100% I said use its onload event

    <iframe onload="setIframeHeight(this.name);">

  • #7
    ivy
    ivy is offline
    Regular Coder
    Join Date
    Jun 2002
    Location
    London / Glasgow / Liverpool
    Posts
    177
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hi guys,

    Just been reading all the above. excellent stuff.

    Looked at the recommended links from WA - great, but...

    I need to be able to load external pages as well as my own into the iFrame. And of course would like the iFrame resized each time to accommodate the page being loaded into it. Also, I have PowerPoint presentations being loaded into the iFrame. I was looking at Garadon's reply but where would I put the onload? I guess in the <iFrame> tag but how to I write it correctly? I currently have:

    <iframe src="http://www.mydomain.com/page1.shtml" name="if001" scrolling="yes" align="top" width="100%" height="100%" marginwidth="0" marginheight="0" frameborder="0"></iframe>

    which doesn't do what I require!!!

    Look forward to hearing from you.
    Last edited by ivy; 05-31-2004 at 05:52 PM.
    See ya

    Ivy.

    MAC Codes

  • #8
    WA
    WA is offline
    Administrator
    Join Date
    Mar 2002
    Posts
    2,596
    Thanks
    2
    Thanked 19 Times in 18 Posts
    Ivy: By external pages, do you mean pages from another domain? Unfortunately the two scripts I posted cannot resize the iframe once it contains a page from a different domain than the one it's on itself, due to inherent security limitations with JavaScript.
    - George
    - JavaScript Kit- JavaScript tutorials and 400+ scripts!
    - JavaScript Reference- JavaScript reference you can relate to.

  • #9
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    any word on whether i should switch scripts?
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #10
    ivy
    ivy is offline
    Regular Coder
    Join Date
    Jun 2002
    Location
    London / Glasgow / Liverpool
    Posts
    177
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hi WA et al

    Thank you for your reply. Yes, I did mean external pages on another domain. I'll have to ponder over this for a while. I'm wondering whether the iframe can have a class and css deal with it using overflow:inherit ???- not sure will look at it this afternoon and will post back if I sort it!

    I know that the obvious solution is probably to use a target window for external links, but I am developing an educational site that requires the navigation panel to be visible always (makes it easier to navigate and know where you are) and also to cross reference using external site in the iframe and looking at what is available on the original domian. (Make sense?? I think so!)

    I was really excited with canadianjamson's original post but I cannot, for obvious reasons, get the code onto all pages loaded into the iframe!

    I tried using Garadon's solution, but couldn't get it to work... I used:

    <iframe onload="setIframeHeight(this.name);" src="http://www.mydomain.com/page1.shtml" name="if001" align="top" marginwidth="0" marginheight="0" frameborder="0"></iframe>

    Do I need to change the (this.name) to anything???? I am not sure what to do with that!

    Thank you for help so far.... Look forwrad to receiving just a little more !!!
    See ya

    Ivy.

    MAC Codes

  • #11
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    i wonder if you can remotely execute a code

    something like onload="blahablah.html" run blahblah
    doubt it though.

    well, perhaps you could load your external iframe content into a LAYER on a blank html page... have that blank page load into the iframe instead of the external page directly. that way you could set the LAYER's height & width to 100% (getting the exact effect of loading directly into the iframe), and you could add the necessary scripts into the <head> and <body> to use my iframe script
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #12
    New to the CF scene
    Join Date
    Oct 2005
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Can I get the iframe code as well, because the iframe code i have won't work unless I insert a height px


  •  

    Posting Permissions

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