Auto-resize Iframe when Content Size Changes
An iframe is a section of a web page where the content of another web page can be published. It's done with an HTML iframe tag.
This article describes how to resize the height of an iframe automatically — whenever the content of the web page being published within the iframe changes. (Resizing the width can be accomplished by substituting each word "height" with "width", maintaining the letter case.)
Of course, it's fairly simple to adjust the height of an iframe when the content first loads. (I'll show you how to do that, too.) But if the content in the iframe changes, the iframe size may need to be adjusted further.
A common use of an iframe is to present a form, so a page reload is unnecessary when the form submits. After the form is submitted, a thank-you page is displayed within the iframe.
The thank-you page generally is a different size, however, and either puts scrollbars into the iframe or leaves a large blank area within the iframe.
Therefore, the iframe size needs to be adjusted.
(There are other reasons that content changes within an iframe. The same principle described in this article can be used for other implementations.)
A caveat: The URL of the page being published within the iframe must be on the same domain as the web page with the iframe tag. Otherwise, the web page with the iframe tag won't be able to determine the size of the content within the iframe. It's subject to the built-in same-origin security restriction.
Here's an example iframe that resizes for the thank-you page after the form button is clicked:
Before describing how to implement the iframe auto-resize for your site, here's the code for the above example. There are 3 files.
File 1: The web page containing the iframe tag needs to contain this code:
<div style="border:2px solid #666; border-radius:11px; padding:20px;">
<iframe id="form-iframe" src="iframe1form.html" style="margin:0; width:100%; height:150px; border:none; overflow:hidden;" scrolling="no" onload="AdjustIframeHeightOnLoad()"></iframe>
<script type="text/javascript">
function AdjustIframeHeightOnLoad() { document.getElementById("form-iframe").style.height = document.getElementById("form-iframe").contentWindow.document.body.scrollHeight + "px"; }
function AdjustIframeHeight(i) { document.getElementById("form-iframe").style.height = parseInt(i) + "px"; }
</script>
</div>
The purpose of the div tag is merely to provide a border with rounded corners for the iframe. At least some browsers don't implement iframe borders with as much versatility as a div tag.
File 2: The web page (iframe1form.html) containing the form:
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title>iFrame Resizing Test</title> </head> <body style="margin-top:0; text-align:center;"> <h1 style="margin-top:0;"> iFrame Resizing Test </h1> <p> When the form button is clicked, the thank-you page loads. </p> <form method="post" action="iframe1th.html"> <input type="submit" value="Click"> </form> </body> </html>
File 3: The web page (iframe1th.html) that is the thank-you page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>iFrame Test Thank-you Page</title>
</head>
<body style="margin-top:0;">
<div id="page-container">
<h1 style="margin-top:0; text-align:center; letter-spacing:1px;">
Thank You!
</h1>
</div>
<script type="text/javascript">
parent.AdjustIframeHeight(document.getElementById("page-container").scrollHeight);
</script>
</body>
</html>
Put all three files into the same directory on your server. Type the URL of file 1 into your browser. You should see the same functionality as the above example, iFrame Resizing Test.
Here's an overview of how it works:
-
When the web page with the iframe tag loads, file iframe1form.html (the page with the form) is loaded into the iframe tag.
-
When the button in file iframe1form.html is clicked, file iframe1th.html (the thank-you page) is loaded into the iframe tag, replacing the page with the form.
-
When file thank-you page loads into the iframe, it tells the web page with the iframe tag how tall the iframe shall be to contain all of the thank-you page's content.
Now, let's talk about implementing a similar system on your website.
Implementing an Auto-resizing Iframe with a Form
Let's get the pages ready last to first — the thank-you page, the form page, then the page with the iframe tag. The reason for doing them in backward order is so the location of a file is known before it needs to be specified.
A. The Thank-you Page
-
Remove the top margin from the web page.
For the JavaScript to calculate the height required for the iframe, the top margin of the web page needs to be zero. In the above example code, you'll see the body tag has margin-top:0; inline CSS. Alternatively, removing the top margin from the body tag can be done in a style sheet.
Only the top margin is required to be removed. But all margins can be removed safely.
If a top margin remained in place, the iframe's height calculation would be off by the amount of the margin at least in some browsers.
-
Remove the top margin of the first line of content.
Similar to the top margin of the page, any top margin in the first line of content will cause the iframe's height calculation by the amount of the margin. A style="margin-top:0;" inline CSS attribute should do the trick. See the h1 tags of the example files.
-
Put the thank-you page content into a div.
Example div tag (must have an id value):
<div id="page-container">
The reason for the div tag is for the JavaScript (next item on the list) to be able to calculate the height of the content. So, put the div tag as the first line below the body tag and the closing </div> tag immediately above the closing </body> tag.
-
Put JavaScript at the bottom of the body content.
Immediately below the closing </div> tag (see previous step), insert this JavaScript:
<script type="text/javascript"> parent.AdjustIframeHeight(document.getElementById("page-container").scrollHeight); </script>If the id value of the div (previous list item) isn't "page-container", then "page-container" in the JavaScript needs to be changed accordingly.
The JavaScript runs immediately after the div is loaded. When it runs, it reports the div's content height to JavaScript located on the web page with the iframe tag — which then adjusts the iframe height.
-
Upload the thank-you page to your server and make a note of its URL.
B. The Page with the Form
(The first two items on this list are identical to the first two item on the thank-you page list.)
-
Remove the top margin from the web page.
For the JavaScript to calculate the height required for the iframe, the top margin of the web page needs to be zero. In the above example code, you'll see the body tag has margin-top:0; inline CSS. Alternatively, removing the top margin from the body tag can be done in a style sheet.
Only the top margin is required to be removed. But all margins can be removed safely.
If a top margin remained in place, the iframe's height calculation would be off by the amount of the margin at least in some browsers.
-
Remove the top margin of the first line of content.
Similar to the top margin of the page, any top margin in the first line of content will cause the iframe's height calculation by the amount of the margin. A style="margin-top:0;" inline CSS attribute should do the trick. See the h1 tags of the example files.
-
Specify the URL of the thank-you page as the value for the form's action attribute.
The thank-you page was uploaded to the server in step A.
-
Upload the page with the form to your server and make a note of its URL.
C. The Web Page with the Iframe Tag
-
Insert the iframe tag into the web page.
Here's an example:
<iframe id="form-iframe" src="iframe1form.html" style="margin:0; width:100%; height:150px; border:none; overflow:hidden;" scrolling="no" onload="AdjustIframeHeightOnLoad()"></iframe>
Change the value of the src attribute to the URL of the page with the form uploaded to the server in step B.
Both the id and onload attributes are required. The style may be changed as appropriate for your implementation.
The id value is used in the JavaScript (next list item) and onload attributes runs the JavaScript to adjust the iframe height as soon as the iframe finishes loading.
-
Insert JavaScript below the iframe.
Put this JavaScript somewhere below the iframe. It may be down at the end of the page and/or imported from an external file.
<script type="text/javascript"> function AdjustIframeHeightOnLoad() { document.getElementById("form-iframe").style.height = document.getElementById("form-iframe").contentWindow.document.body.scrollHeight + "px"; } function AdjustIframeHeight(i) { document.getElementById("form-iframe").style.height = parseInt(i) + "px"; } </script>The id value of the iframe tag in the previous list item is specified in the JavaScript in three places. If the id value "form-iframe" of the iframe is changed, all three places in the JavaScript must be changed accordingly.
The function AdjustIframeHeightOnLoad() adjusts the iframe height when the iframe is first loaded. The function AdjustIframeHeight() adjusts the iframe height when called from the JavaScript in the thank-you page.
-
Upload the page with the iframe tag to your server and make a note of its URL.
To test your installation, type the URL of the page with the iframe tag into your browser.
Once implemented, doing form submissions in an iframe lets the entire submission-to-confirmation process take place without reloading the web page. The iframe is resized as its content changes.
Will Bontrager
