Automatic iFrame Sizing

When an iframe tag is used, the frame dimensions should be specified. Otherwise, the dimensions will be whatever default the browser applies, which might vary from browser to browser.

If the content for the iframe is more than will fit, the iframe spawns scrollbars — if you allow it.

For some page designs, a borderless and scrollbar-free frame is preferred. Generally, the idea is for the iframe to be congruent with the rest of the page. It can work when the content requires slightly less space than the iframe provides in order to accommodate browsers that might render text slightly larger than the one you are using to test with.

But what if you don't know how much content the frame will hold? Or you want an exact fit that accommodates any font rendering differences from browser to browser?

It is possible to adjust the frame size after the content has been pulled in, so long as the content is pulled in from the same domain as the web page. (To reduce jiggle, specify an initial iframe size close to the expected final size.)

To auto-size the iframe after its content loads, give it the onload attribute. The onload attribute's value is "AdjustIframeDimensions()". The "AdjustIframeDimensions()" is a JavaScript function that must exist on the page where the iframe tag is located.

This example loads with a frame 400 pixels wide and 200 pixels high. After the content is loaded, the dimensions are adjusted.

The following source code is from the example. Both the iframe tag and the JavaScript are included. The JavaScript is copy and paste and may be placed anywhere on the web page, although immediately above or below the iframe tag would keep both together for simplicity. The iframe may need modification.

<iframe 
   id="my-iframe" 
   src="/possibilities/demo/iframecontent.html" 
   style="width:400px; height:200px; border:none; outline:3px dotted #ccc; overflow:hidden;" 
   onload="AdjustIframeDimensions()"
   scrolling="no">
</iframe>

<script type="text/javascript">
function AdjustIframeDimensions()
{
   let iframe = document.getElementById("my-iframe");
   iframe.style.height = iframe.contentWindow.document.body.scrollHeight + "px";
   iframe.style.width = iframe.contentWindow.document.body.scrollWidth + "px";
}
</script>

Notes —

In the iframe tag, the /possibilities/demo/iframecontent.html src value will need to be changed to the location where the content is pulled in from. For the resizing to work, the content must be from the same domain as the web page with the iframe tag.

The CSS styles width:400px; height:200px; may be changed to more closely match the expected size of the iframe content.

The JavaScript is good as it is. When the content is loaded, the JavaScript function measures the scroll dimensions of the content and adjusts the frame size accordingly.

Adjust the CSS for the iframe tag according to your liking. As a point, the example has a dotted outline, which may be kept or discarded.

So long as iframe content is pulled in from the same domain as the web page with the iframe tag, the dimensions of the frame can be adjusted automatically to accommodate the size of the frame's content.

(This content first appeared in Possibilities newsletter.)

Will Bontrager