View Full Version : Iframes onload?

05-21-2006, 02:53 PM
Can anyone tell me how do i make a certain function call when the content in an iframe loads??
I thought I could do: framename.onload
but didn't work then i thought of doing: self.framename.onload
but it didn't work either??
Any help would be appreciated.

05-21-2006, 07:10 PM
This is how DD did it in his iframe SSI II script (crucial parts red):

function resizeIframe(frameid){
var currentfr=document.getElementById(frameid)
if (currentfr && !window.opera){
if (currentfr.contentDocument && currentfr.contentDocument.body.offsetHeight) //ns6 syntax
currentfr.height = currentfr.contentDocument.body.offsetHeight+FFextraHeight;
else if (currentfr.Document && currentfr.Document.body.scrollHeight) //ie5+ syntax
currentfr.height = currentfr.Document.body.scrollHeight;
if (currentfr.addEventListener)
currentfr.addEventListener("load", readjustIframe, false)
else if (currentfr.attachEvent){
currentfr.detachEvent("onload", readjustIframe) // Bug fix line
currentfr.attachEvent("onload", readjustIframe)

The easiest way is to use an onload event on the page(s) being loaded into the iframe.

This also works but is invalid according to the w3c:

<iframe onload="doSomething();"></iframe>

And since DD's method from above uses the iframe as element (as opposed to the iframe as named window), this might work:


Note, when using onload in code, the function called cannot accept either parameters or the parameter parenthesis. You can use a function though:

document.getElementById('iframeId').onload=function(){doSomething('blue', 32);}

05-22-2006, 07:38 AM
Nope, not working. By the way can you give me an example of how to use those??
I am a newbie so please be explicit.

05-22-2006, 07:48 AM
Why not you put the onload function call in the iframe webpage itself rather than trying in the webpage where iframe is contained. try the otherway round if that works, just an idea!! :D

05-22-2006, 08:52 AM
shyamdev is right and that is one of the methods I suggested.

The easiest way is to use an onload event on the page(s) being loaded into the iframe.

I just tested the others and using the onload attribute works but, as I said before, is considered invalid HTML. This works and validates:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">

var currentfr=document.getElementById('Bob')
if (currentfr.addEventListener)
currentfr.addEventListener("load", something, false)
else if (currentfr.attachEvent){
currentfr.detachEvent("onload", something)
currentfr.attachEvent("onload", something)

function something(){

<iframe id="Bob" src="test1.htm"></iframe>

Using the simpler:


Works but, only in FF and Opera, not in IE.

Just a note, whatever you do to add an onload event to the iframe, the iframe must be parsed by the browser first unless you use the attribute method which, again, is invalid, though it works:

<iframe onload="something();"></iframe>

05-22-2006, 02:43 PM
Thanks shyamdev and jscheuer1. I am sorry to bother you for long. Both of your ideas of putting the onload function call in the iframe webpage itself rather than trying in the webpage where iframe is contained is good and right but ... the pages that should be loaded in my frame is not local pages. It's something like <input type="text"><input type="submit" onclick="load_url_from_the_textarea_to_the_frame()" when this button is clicked load the webpage in the iframe and the iframe markup looks like this: <iframe src=""></iframe>
So unfortunately I am not sure that works. Anyways thanks guys.:) I think I will try the idea jscheuer1's idea again. Who know's it might work as you have also given me the example.

08-04-2009, 05:20 PM
I was having this same problem. My code worked in every browser but IE. Here is my solution:

My original code was:

<iframe id="id" name="id" onload="function_name();" scrolling="auto" frameborder="1" src="example.asp"</iframe>

The working code is:

<iframe id="id" name="id" onload="return function_name();" scrolling="auto" frameborder="1" src="example.asp"</iframe>

I didn't think I was passing anything because my JavaScript doesn't have a return functionality to it but if it works..it works. This still work fine in Chrome and Firefox.