You are here:   Articles
Register   |  Login

Programming Articles

Minimize
12

November 5, 2010 - updated code here.
http://www.programmer.bz/Articles/tabid/159/asp_net_sql/243/Dynamically-Resize-Iframe-to-Fit-Contents-for-Internet-Explorer-and-Firefox.aspx


To dynamically resize an iframe to it's contents, set the height of the iframe to the scroll height.

<iframe frameborder="0" height="0" 
id=iframe1
marginheight="0" marginwidth="0" 
scrolling="no" width="100%"
onload="this.style.height=iframe1.document.body.scrollHeight + 5;"
src="/file.htm" >
<iframe>

Here is a function to write and dynamically resize an iframe to it's contents.

function br_page_Iframe(src, iclass, istyle, id) {
    if (!id) id = 'br_iframe_' + this.iframe_count++;
    var onload = ' onload="this.style.height=' + id + '.document.body.scrollHeight + 5;"';
    id = ' id="' + id + '"';
    if (!iclass) iclass = '';
    else iclass = ' class="' + iclass + '"';
    if (!istyle) istyle = '';
    else istyle = ' style="' + istyle;
    var out = '<iframe frameborder="0" height="0" marginheight="0" marginwidth="0" scrolling="no" width="100%"'
      + id
      + onload
      + iclass
      + istyle
      + ' src="' + src + '"'
      + '></iframe>';
    document.write(out);
}

If your page and the page contained inside the iframe are on different domains, to allow your function to execute, add this code to the page contained in the iframe, where domainoriginal is the domain name of the page containing the iframe.

<script type="text/javascript">
document.domain=domainoriginal;
</script>

By Andrew Weitzen, Bronze Inc. (c) 2010

Bronze is the publisher of several online Internet journals including: InternetHandholding.com, DomainNames.gs, DotNetNuke.bz, Programmer.bz, Software.vg, WebHosting.vg

Post Rating

Post Comment

Name (required)

Email (required)

Website

Programmer Newsletter

Minimize

Subscribe to the Internet Handholding newsletter



Reccomend Programmer.bz

Minimize

Share/Bookmark Bookmark and Share