Dynamically resize an iframe height according to its contents (same domain)

The following is from a demonstration page on my website www.eagleware.net that has several examples and code on how to dynamically resize an iframe.

 

There are many programming situations that require the use of iframes for one reason or another. Iframes require you to specify a fixed height or they default to a height of around 50px. If the content of a iframe is greater or lesser than the height you declare when calling the iframe your iframe depending on the parameters used when declaring it will either have a vertical scrollbar, truncated content or dead empty space.

 

For many programming situations this is not a problem and you can configure the iframe to display your content adequately, but when your iframe contains dynamic content that changes depending on user interaction or frequent code changes you might need a dynamically sized iframe that can automatically change it’s height as required.

 

This tutorial uses two javascript routines, BrowserDetect from http://www.quirksmode.org/js/detect.html and resizeIframe.js from many sources that I pieced together to create a simple way to resize an iframe automatically or as needed.

 

This javascript resizing routine works for me in html, aspx, aspx ajax and has been tested in IE 9, Firefox 5, Opera 11.5, Chrome 14 and Safari 5 and should work without modification although you can customize it to fit most any browser easily.

 

Additionally this routine will let you call nested dynamically resizable iframes; ie: parent-childiframe-childiframe or use it in other 3rd party controls like Devexpress’s ASPxGridview, ASPxPagecontrol (these pages), etc.

 

Note: This routine will not resize an iframe that has a PDF as a source file and also the iframe src MUST be on the same domain.

 

Dynamically resize an iframe height according to its contents (same domain)