CODEWITHSUNDEEP
google-chromeiframe
popnbrown
popnbrown

Reputation: 45

Adjusting IFrame Height only Chrome

SO I know this solution is somewhere but I can't find it. I've been digging for about a day into google and stackOverflow.

Basically, I have an iframe and I'm trying to get it to expand to the size of its contents, a pretty simple task. I went through several methods, looking at different heights etc. But for some gosh darn reason, Chrome does not want to put up with me. So here is the javascript to resize the IFrame. To make sure JS was working and to read the height I threw in that innerHTML piece (sort of like debugging)

<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.body.offsetHeight;
}

</script>

Here's the iframe:

    <iframe onload="resizeFrame()" id="mainContent" src="homec.html" scrolling=auto frameborder=0 height="100%" width="100%">
    Not working!</iframe>

So for some odd reason, it does not want to work, pretty much hates me in Chrome. But it works in Firefox and IE. Any solutions??

Upvotes: 4

Views: 6396

Answers (1)

kmote
kmote

Reputation: 16745

Unless I'm missing something, I believe you have a typo on the last line of your function (missing .document.)

The following works for me in Chrome (18.0):

<!DOCTYPE html>
<html>
<head>
<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>
</head>
<body>
<iframe onload="resizeFrame()" id="mainContent" src="homec.html" scrolling=auto frameborder=0 
height="100%" width="100%">Working!</iframe>
<p id="Footer"> Footer</p>
</body>
</html>

Upvotes: 1

Related Questions