asked on

Iframe auto-height JS not working in IE9

The following JavaScript has been working perfectly in all browsers, but it doesn't work in IE9 except in "compatibility mode". It resizes the parent of an iframe to fit the iframe's height.

function iFrameHeight() {
	var h = 0;
	if (!document.all) {
		var f = document.getElementById('blockrandom') ;
	        f.style.height = '100px' ;
		var d = (f.contentWindow.document || f.contentDocument) ;
		var h = Math.max(d.body.offsetHeight, d.body.scrollHeight) ;
		h += (document.all)? 60 : 20 ;
		f.style.height = h + 'px' ;
		f.setAttribute("height", h) ;
	} else if (document.all) {
		h = document.frames('blockrandom').document.body.scrollHeight ;
		document.all.blockrandom.style.height = h + 20 + 'px' ;
	}
}

Open in new window

I'd be grateful for some insight into why it's not working and, more importantly, how to modify it so it will work in IE9 without requiring IE compatibility mode. If it can't be done, I'd appreciate being told that too.

Thanks.

Michel Plungjan

try this - your code is not very consistent and document.all is quite old

<!--[if IE]>
<script>
function iFrameHeight() {
  var f = document.getElementById('blockrandom');
  h = f.document.body.scrollHeight ;
  f.style.height = h + 20 + 'px' ;
}
</script>
<![endif]-->
<![if !IE]>
<script>
function iFrameHeight() {
  var f = document.getElementById('blockrandom');
  f.style.height = '100px' ;
  var d = (f.contentWindow.document || f.contentDocument) ;
  var h = Math.max(d.body.offsetHeight, d.body.scrollHeight) ;
  h += (document.all)? 60 : 20 ;
  f.style.height = h + 'px' ;
  f.setAttribute("height", h) ;
}
</script>
<![endif]>

Open in new window

Jonathan Greenberg

ASKER

mplungjan, thank you for the tips. I'm pretty new to JavaScript and programming in general, so I appreciate the feedback.

It's doing something, but still not what I need it to do. But I should provide some detail as to what this script is really for.

I have a page on a Joomla site that displays pages from a subdomain in an iframe. The parent div needs to resize for the iframe, but the first iframe contains links to other pages of the subdomain. I need the resizing to take place recursively for each new page that's displayed in the iframe.

My original code, as well as your improvement to it, does the job perfectly. But my code does nothing in IE9. Your code does something, but it makes the height about 350px too high. Each subsequent iframed page, from clicks within the iframe, result in an additional 250px or so of height (px estimate is by eye and may be significantly off).

Sorry for not explaining this more fully from the start. Are you able to modify your code so this will now work in IE9?

Thanks very much for your time. And let me know if you'd like me to provide a link to the page. It would be no problem.

Michel Plungjan

Actually I missed a few things

Please try this. I have a hard time guessing why you would have a too high iframe unless the value keeps going up

<!--[if IE]>
<script>
function iFrameHeight() {
  var f = window.frames["blockrandom"];
  var h = f.document.body.scrollHeight ;
  f.style.height = (h + 20) + 'px' ;
}
</script>
<![endif]-->
<![if !IE]>
<script>
function iFrameHeight() {
  var f = document.getElementById('blockrandom');
  f.style.height = '100px' ;
  var d = (f.contentWindow.document || f.contentDocument) ;
  var h = Math.max(d.body.offsetHeight, d.body.scrollHeight) ;
  h += 20; // scrollbars?
  f.style.height = h + 'px' ;
  f.setAttribute("height", h) ;
}
</script>
<![endif]>

Open in new window

ASKER CERTIFIED SOLUTION

Michel Plungjan

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Jonathan Greenberg

ASKER

Yes, that's right, the value was increasing with each click.

Your new code does the same as my original code. The height remains the same, regardless of the height of the content.

One other relevant thing I neglected to mention is that Joomla requires a default height setting. I have it set at 100px. That's what my original code was in IE9, and that's what yours now is, 100px.

Jonathan Greenberg

ASKER

Awesome! That seems to do it! I'm just going to test for a few more minutes....

Jonathan Greenberg

ASKER

Wow. If that was just "for fun," I'd like to see what you'd come up with if you were really trying!

Thanks. This is perfect!

Michel Plungjan

:)

Glad to help and to get rid of some IE4/5 luggage