Treehouse: Grow your CSS skills. Land your dream job.

Resizing an iframe – Script problems

  • # September 11, 2009 at 11:31 pm

    Hey guys. On one of the sites I maintain, I’m using a bit of JavaScript to dynamically resize an iframe, which contains a photo gallery. I realize that using iframes is not optimal, but in this case, I’m fairly certain it is the best option. Anyway, I"m having an issue with the script, which I found after some hectic Googling and now can’t even recall where. I know about as much JavaScript as I know quantum physics, so figuring out how to fix it by myself would be a real adventure in learning. I thought I’d present the issue to you kind folks here first.

    Basically what happens is that the script does exactly what it is supposed to on page load—assesses the height of the content called within the iframe and adjusts the height of the iframe accordingly, to eliminate vertical scrollbars. However, when clicking on an album within the iframe, it does not resize again to accommodate for the resulting significant decrease in height of content. It does, quite contrarily, do this on the other site I have the script implemented on, quite nicely.

    Link to example.

    //Input the IDs of the IFRAMES you wish to dynamically resize to match its content height:
    //Separate each ID with a comma. Examples: [“myframe1″, “myframe2″] or [“myframe”] or [] for none:
    var iframeids=[“photoframe”]

    //Should script hide iframe from browsers that don’t support this script (non IE5+/NS6+ browsers. Recommended):
    var iframehide=”no”

    var getFFVersion=navigator.userAgent.substring(navigator.userAgent.indexOf(“Firefox”)).split(“/”)[1]
    var FFextraHeight=parseFloat(getFFVersion)>=0.1? 30 : 0 //extra height in px to add to iframe in FireFox 1.0+ browsers

    function resizeCaller() {
    var dyniframe=new Array()
    for (i=0; i if (document.getElementById)
    //reveal iframe for lower end browsers? (see var above):
    if ((document.all || document.getElementById) && iframehide=="no"){
    var tempobj=document.all? document.all[iframeids] : document.getElementById(iframeids)"block"

    function resizeIframe(frameid){
    var currentfr=document.getElementById(frameid)
    if (currentfr && !window.opera){"block"
    if (currentfr.contentDocument && currentfr.contentDocument.body.offsetHeight) //ns6 syntax
    currentfr.height = currentfr.contentDocument.body.offsetHeight+FFextraHeight;
    else if (currentfr.Document && currentfr.Document.body.scrollHeight + 60) //ie5+ syntax
    currentfr.height = currentfr.Document.body.scrollHeight + 60;
    if (currentfr.addEventListener)
    currentfr.addEventListener("load", readjustIframe, false)
    else if (currentfr.attachEvent){
    currentfr.detachEvent("onload", readjustIframe) // Bug fix line
    currentfr.attachEvent("onload", readjustIframe)

    function readjustIframe(loadevt) {
    var crossevt=(window.event)? event : loadevt
    var iframeroot=(crossevt.currentTarget)? crossevt.currentTarget : crossevt.srcElement
    if (iframeroot)

    function loadintoIframe(iframeid, url){
    if (document.getElementById)

    if (window.addEventListener)
    window.addEventListener("load", resizeCaller, false)
    else if (window.attachEvent)
    window.attachEvent("onload", resizeCaller)

    I would really appreciate any assistance on this. Even a suggestion for a different script, or a better way of accomplishing this would be great!

    Many thanks in advance.

# September 16, 2009 at 9:38 pm

Maybe you could try and break through the frame on the second page.

# September 17, 2009 at 2:34 am

Hmm, thanks, but I’d really like to be able to maintain the iframe, as breaking out of it would mean no access to the main site navigation. I could open it in a new window, but I find that rather intrusive, and can’t stand when it’s done to me, so I’m a bit against that as well.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.