iframe resizing with scrollheight in chrome/safari

I'm trying to resize (make bigger or smaller) an iframe based on it's contents. After a click on each page a method is called which does the resizing.

In Chrome I can make the iframe bigger, but not smaller. document.body.scrollHeight is always the biggest value.

So if one big page sets #iframe.height = '620px', and someone clicks on a link to page with less content scrollHeight will remain at 620px instead of decreasing.

What's the proper way of handling this in Chrome/Safari?

Answers:

Answer

Before you ask for the height of the document inside the iframe you should set the height of the iframe object to "auto". Something like this:

objIframe = document.getElementById('theIframeId');    
objIframe.style.height = 'auto';

And now:

document.body.scrollHeight

returns the actual height of the document.

Answer

Did you try using document.documentElement.scrollHeight instead?

Answer

According to spec, Element.scrollHeight will round the value to an integer. If you need an accurate fractional value, use Element.getBoundingClientRect() instead.

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.