resize iframe height according to content

Loading a web page in an iframe . The content in the iframe can be of more height than the iframe’s height. In this case scroll bars appears. But sometimes we don’t require scroll bars and on dynamically loaded content disturbed the page in iframe.

To resize iframe height according to content, we can use javascript or jQuery. We just need to apply code on the iframe load event, so that content is loaded and height can be get at that time

Using javascript:
scrollHeight is the major property to retrieve the height of the IFRAME’s content like this:

After the IFRAME is loaded, you can then change the height by doing the following:

On the IFRAME load event, you can call this resizeIframe function

If you are doing form submission in iframe, then additionally need to call resizeIframe from the IFRAME itself after a form-submission occurred.For that, we need to call the following code in iframe’s content script:

Using jQuery

Sometimed we need to wait for Iframe loading, in this case we need to use javascript setInterval() function like

It will keep checking till iframe loaded fully in browser.

You Might Interested In

Leave a Reply

Enclose a code block like: <pre><code>Your Code Snippet</code></pre>.