8th

Feb

Dynamic Iframe Sized to Contents w/ Javascript

This Javascript works with Firefox and IE7. The function is called by the iframe’s onLoad event. It pulls the scrollbar height from the frame and resizes the frame height to match it.

<script language=”text/javascript”>
<!–
function calcHeight()
{
var the_height=
document.getElementById(’submit_frame’).contentWindow.
document.body.scrollHeight;

document.getElementById(’submit_frame’).style.height=
(the_height+10)+”px”;
}
//–>
</script>

And use the following HTML for the iframe.

<iframe src=”frame.html” onLoad=”calcHeight();” scrolling=”no” id=”submit_frame” style=”width: 400px”></iframe>

Share and Enjoy:
  • Digg
  • del.icio.us
  • Netvouz
  • DZone
  • ThisNext
  • MisterWong
  • Wists

Tags: , ,

Software, Web Design | Colin Godsey, February 8, 2008 10:28 am

7 Comments

  • How could we do onLoad event in tag..I reckon onLoad event is not possible in Iframe.then how could we call the javascript.plZ give some valuable inputs on this regarding???

     gift sam — October 7th, 2008 at 3:27 pm

  • the onload event on an iframe is actually called when the iframe has fully loaded. i believe its called on every element after it has done its processing

     Colin Godsey — April 13th, 2009 at 9:35 pm

  • Colin, I have been trying to use a slight variation of your code to resize an iframe according to its contents. The code works beautifully when I open the page from a local environment (run it from my hard drive), but when I upload the site to its hosted location and open the page, the code doesn’t appear to work. When I open the page, the height of the iframe is set as if the “calcHeight()” script is not
    getting run.

    Here is the site that I am using to test your code:

    http://mysite.verizon.net/craigmgeorge/test1.html

    If I view the page load in an error console, I see the following error:

    Unsafe JavaScript attempt to access frame with URL
    http://dealers.autouplinkusa.com/v/?DealerId=6188&Type=U&F=1 from frame with URL http://mysite.verizon.net/craigmgeorge/test1.html.
    Domains, protocols and ports must match.

    Is it the case that this type of code won’t work if the domain of the iframe source page does not match the domain of the parent page? If so, do you know of any other ways to adjust the height of an iframe according to the source page?

    Thanks in advance for your help!

     Merrimack — April 21st, 2009 at 11:20 pm

  • You are corrent. If the frame and the parent are on different domains, javascript will through a permissions error. This a somewhat recent change, but it makes a lot of sense from a security standpoint.

     Colin Godsey — April 23rd, 2009 at 12:11 am

  • I have the same issue, my ifram is working as widjet, if i put the widjet in same domain it will works, otherwise it won’t.There is a javascript permission error when trying to change the iframe height dynamically.

    Anybody know how solve this issue?

     vks — May 26th, 2009 at 12:22 pm

  • @vks

    Check this out: Same origin policy for JavaScript

    https://developer.mozilla.org/En/Same_origin_policy_for_JavaScript

     ipoeals — August 9th, 2009 at 6:53 am

  • yes, when you are using this method, you have to make sure it doesnt break the cross-domain security model that most newer browsers have. it shouldn’t be an issues if you are running a legit site. if you do need to go this route, it is always possible to funnel everything using a proxy that takes advantage of something like CURL

     Colin Godsey — August 17th, 2009 at 10:25 pm

Leave a Reply