Self-resizing frames

Integrating a web page inside another page can be performed very easily with the iframe tag. I noticed only one small problem: its sizing. If the width can be easily controlled at the zoom screen (100%), to choose the height: 100%; even by “amplifying” it (100%!important;) is not useful.

An elegant way is by using javascript, either embedded directly in the tag or as a callable function.

a. Embed variant

<iframe src="/test-pagina/" style="width:100%;border:none;" onload="this.style.height = this.contentWindow.document.documentElement.scrollHeight + 'px';"></iframe>

b. Using the function. In the <head> section, enter the function below, which can then be called in the iframe tag script.

<script>
function fc_redimens_frame(obj) {
obj.style.width= 100 + '%';
obj.style.height = 0; // height recalculation, otherwise it would just increase
obj.style.height = obj.contentWindow.document.documentElement.scrollHeight+10 + 'px';
}
</script>

<body>
<iframe src="/test-pagina/" style="width:100%;border:none;" onload="fc_redimens_frame(this)"></iframe>
</body>

If the positioning of the “play tricks” iframe (possible overlap over other blocks of text / images) can be placed, both before and after, a div with the attribute clear:

<div style="display: block; clear: both;"></div>

Author: Ovidiu.S

I am quite passionate about this professional area as if I know something - no matter how little - I want to share it with others.

Leave a Reply