Dynamic iframe height not working in chrome

Question

im going crazy here. i found a script here that was supposedly going to work on chrome as well but i just cant get it to work

here is the script in my header

<script type="text/javascript">
function resizeFrame() {
     var t=document.getElementById("Footer");
     var f = document.getElementById("mainContent");
     var y = f.contentWindow;
     t.innerHTML = y.document.body.offsetHeight;
     f.height = y.document.body.offsetHeight;
    }
</script>

and the iframe

 <iframe onload="resizeFrame()" id="mainContent" src="swwbookpg1.php" scrolling=auto frameborder=0 
height="100%" width="100%">Working!</iframe>
<p id="Footer"> Footer</p>

it works in firefox and IE but not in chrome.

if anyone can help that would be amazing!

here it is in use: https://www.whalewatchingsydney.com.au/payment_sww/

thanks =)

Answer 1

Chrome:

1. I found that when I create an iFrame with document.createElement and assign it a name ("myIframe"), the new iFrame does not load content when I set its location. But if I assign a url to the element's src, it worked fine. Now then, when instead I manually inserted the iframe tags in the html text (static -- as opposed to using document.createElement) it would load the document when setting its location (and also the tag's src). Strange.

2. Assuming you are intending to display the iframe's content directly, I wonder why? I like to use iframes but really only to dynamically load content to a container in my top window. The last part of the html loaded into the iframe includes a script that moves the output into the desired location of the top frame.

Example of a php script that loads new content via an iFrame.

// top Frame calls the php script like this:

 <div id="myContainerDiv">
    <p>old content - please replace me with fresh content</p>
</div>


<iframe name="hiddenFrame" style="display:none;"></iframe>

<script>

    hiddenFrame.location = 'index.php?getNewContent=125';

</script>


// the following script would be at the top of index.php

<?php //

if( isset($_GET['getNewContent']) ):


echo '<div id="myIframeHtml">';

    // the html that I want to load to the top frame..


echo '</div>';

?>
<script>

    newContent = document.getElementById('myIframeHtml').innerHTML; // from this iFrame

    topContainer = top.document.getElementById('myContainerDiv'); // in top frame

    topContainer.innerHTML = newContent; // no fuss-no muss --> no encoding or parsing

</script>

<?php

exit;

endif;

Answer 2

Google seem to be living up to their strapline "do no evil". While Chrome is capable of dynamic iframe height adjustment Google do not make it very easy. After two days of struggling with the problem and trying tons of javascript snippets which worked perfectly in every other Browser but Chrome I finally managed to get something that would work. I will share this to hopefully save other website developers the 48 hours pain I had to go through.

Inside external SetiFrameHeight.js file which can then be added to any iframe child document with html.

<script type="text/javascript" src="SetiFrameHeigh.js"></script>

setIframeHeight.js

window.onload=setIframeHeight(window.top.document.getElementById('iFrame_ID'));
//note this code only runs serverside when using Google Chrome, very helpful


function setIframeHeight(ifrm){
    var doc = ifrm.contentDocument? ifrm.contentDocument:
    ifrm.contentWindow.document;
    var RestHeight=ifrm.style.height; //Capture original height see why below.
    ifrm.style.visibility = "hidden";
    ifrm.style.height = "10px"; //Necessary to work properly in some browser eg IE
    var NewHeight = getDocHeight( doc ) + 10;
    if (NewHeight>20){
        ifrm.style.height=NewHeight + "px";
    } else { //if dom returns silly height value put back old height see above.
        ifrm.style.height=RestHeight + "px";
    }
    ifrm.style.visibility = "visible";
}

function getDocHeight(doc) {
    doc = doc || document;
    var body = doc.body, html = doc.documentElement;
    var height = Math.max( body.scrollHeight, body.offsetHeight, html.clientHeight,
    html.scrollHeight, html.offsetHeight );
    return height;
}

The real magic of this code snippet is the function getDocHeight which basically tries every conceivable dom combination and selects the one that gives the maximum height. I cannot take credit for this got it from http://www.christersvensson.com/html-tool/iframe.htm.