469,636 Members | 1,832 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,636 developers. It's quick & easy.

Iframe IE onload problem

Look at the following code:

Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  4. </head>
  5. <body>
  7. <iframe id="olaf" name="olaf" onload="alert('no');"></iframe><br>
  8. <input type="submit" onclick="document.getElementById('olaf').src = 'phpinfo.php'" value="Test">
  10. </body>
  12. <script language="javascript">
  13. var obj = document.getElementById('olaf');
  14. obj.onload = function() { alert('yes'); }
  15. </script>
  17. </html>
The "obj.onload=" contruct should override the first onload statement. In Firefox it works fine and when I click the button a "yes" message is shown. But in Internet Explorer the "no" message is shown. My problem is that I need to set the function (anonmymous) that should be called by the brower when iframe.onload and I can't get this to workin in IE. Can anyone help?

Jul 9 '06 #1
8 62891
I have the same problem with changing onload event of iframe in internet explorer. Instead of:

Expand|Select|Wrap|Line Numbers
  1. <iframe id="ifrm" onload="foo1();"></iframe>
and script:

Expand|Select|Wrap|Line Numbers
  1. getElementById("ifrm").onload = foo2

I used:

Expand|Select|Wrap|Line Numbers
  1. <span="ifrm_wrap"><iframe id="ifrm" onload="foo1();"></iframe></span>
and script:

Expand|Select|Wrap|Line Numbers
  1. getElementById("ifrm_wrap").innerHTML = '<iframe id="ifrm" onload="foo2();"></iframe>';
Not very nice, but works.
Feb 28 '07 #2
I face the same problem. This looks like a stupid IE bug, I wasted hours of time struggling on this issue.

I noticed you can't get or set the onload event for iframe in I.E. When you get, you always get null even you put the onload attribute in the tag. When you set it, you can get what you set, seems it's ok. But the I.E will only call the one you specified in the IFRAME tag. Just ignore what you set. That's strange.

I finally find a walkaround. In the IFRAME tag, i hard code onload to call another function. Then I can set the value of another function.

Expand|Select|Wrap|Line Numbers
  1. <iframe style="display:none" id='f1' onload="this.onload_1();" />
Expand|Select|Wrap|Line Numbers
  1. document.getElementById(f1).onload_1 = function(){alert('test');}
That works.
Dec 8 '07 #3
I know this is an old thread, but the first I encountered when searching for an answer, so I thought I'd chime in. To do it, you need to attach the event. I have event attachment wrapped in a function, but this should help:

Expand|Select|Wrap|Line Numbers
  1. eventPush(document.getElementById('frame_id'),'load',function () {myFrameOnloadFunction();});
  3. function eventPush(obj, event, handler) {
  4.   if (obj.addEventListener) {
  5.     obj.addEventListener(event, handler, false);
  6.   } else if (obj.attachEvent) {
  7.     obj.attachEvent('on'+event, handler);
  8.   }
  9. }
Oct 26 '08 #4
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.
Aug 4 '09 #5
Thanks so much for all your help. I'm no expert in this "stuff" but my function calls to objects in an IFRAME did not work on IE, did everywhere else. Some of the techniques suggested here did not seem to work, others were a bit too complicated for me to follow.

A litte extra searching turned up this link:

And this interesting info:
(accessing IFRAME content)

// IE5.5+ windows
1) document.getElementById(iframeId).contentWindow
2) document.getElementById(iframeId).contentWindow.do cument

// DOM
3) document.getElementById(iframeId).contentDocument

"3)" is what I began with, n/g in IE
"1)" also n/g
"2)" worked in IE, Firefox & Chrome

Go figure.
Jan 9 '10 #6
I came accross this thread when googling, I had the exact same problem. All the above solutions did not work for my case. I came up with a solution myself, which might be of help to others.

I used

window.onload = document.getElementById('frameid').setAttribute('o nload', 'whateverfunctionyouwant();');

as far as I can see this works for all browsers I tested on. Tested on Safari, Firefox, IE and Opera

In my case I had a dynamicly created iframe through javascript. I did this to have the onload events execute before the content of the iframe is fully loaded. The content of the iframe is from an external domain, so sometimes the content loads quite slow and I did not want my visitors to have to wait for that before they can acces the page.

This solution helps with a problem like in:

Expand|Select|Wrap|Line Numbers
  1. newFrame = document.createElement('iframe');
  2. newFrame.src = 'http://www.google.nl';
  3. newFrame.style.width = '600px';
  4. newFrame.style.height = '2500px';
  5. newFrame.setAttribute('onload', 'scroll(0,0)');
  6. document.getElementsByTagName('body')[0].appendChild(newFrame);
On the above example the page will return to the top of the document, whenever the iframe loads in a new document. When someone would have made a query through the iframe and hits next page, the document would automaticly go back to the top.

Hope this helps atleast someone.

Kind regards,

Sep 8 '10 #7
I tried every solution posted above for my problem, and none of them worked. In my case, I have a form containing a file for upload whose target is pointed towards a static IFRAME element.

Expand|Select|Wrap|Line Numbers
  1. <form action="upload.php" method="post" enctype="multipart/form-data" target="myIframe">
Expand|Select|Wrap|Line Numbers
  1. <iframe name="myIframe" id="myIframe" src=""></iframe>
When the form submits, the file is handled by a PHP upload script. Now, in my case, I needed to have the contents of the uploaded file (an HTML page) output to the IFRAME window, like so:

Expand|Select|Wrap|Line Numbers
  1. <?php echo file_get_contents($_FILES['myFile']['tmp_name']); ?>
Additionally, I needed a callback to let my controlling script in the parent window know when the IFRAME's content has loaded. As you all know, this was easy enough in a Mozilla browser. In fact, I could communicate with the parent window using at least 5 different methods! However, not a single one worked for IE.

Then some of your suggestions got me thinking about this ONLOAD attribute for IFRAMEs. Even though none of the solutions worked, I did some research. Some people have said that even though the specification allows for the ONLOAD attribute in an IFRAME element, it just doesn't work (a bug in IE?!).

Finally, I stumbled upon this page:


This commenter shows his work using Microsoft's exclusive JScript coding. It was then that the solution was quickened to me! Here is his sample code:

Expand|Select|Wrap|Line Numbers
  1. <script for="window" event="onload" language="JScript">
  2.   window.status = "Page is loaded!";
  3. </script>
This effectively binds an ONLOAD event handler to the IFRAME element! But since the above snippet is ignored by FireFox, I simply write combined code to perform my cross-browser compatible callback.

My PHP upload script, then, looks like this:

Expand|Select|Wrap|Line Numbers
  1. <?php
  2. echo file_get_contents($_FILES['source-file']['tmp_name']);
  4. <script language="javascript">
  5. // For Mozilla
  6. parent.window.myIframe.setAttribute('onload','myCallbackFunc();');
  7. </script>
  9. <script for="window" event="onload" language="jscript">
  10. // For Microsoft
  11. parent.window.myCallbackFunc();
  12. </script>
  13. ?>
I hope this helps!
Feb 7 '11 #8
The problem can be Iframe loading before the script is executed. This can be prevented by adding the Iframe using Javascript.

Expand|Select|Wrap|Line Numbers
  1. var iframe = document.createElement("iframe");
  2. document.body.appendChild(iframe);
Nov 6 '19 #9

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

2 posts views Thread by saayan | last post: by
5 posts views Thread by Grzesiek | last post: by
reply views Thread by dimepiece18 | last post: by
7 posts views Thread by Tom Cole | last post: by
1 post views Thread by XP | last post: by
3 posts views Thread by whatever0 | last post: by
reply views Thread by gheharukoh7 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.