Iframe IE onload problem

**bagrbagr** · Feb 28 '07, 09:05 PM

I have the same problem with changing onload event of iframe in internet explorer. Instead of:

Code:

<iframe id="ifrm" onload="foo1();"></iframe>

and script:

[CODE=javascript]getElementById( "ifrm").onl oad = foo2[/CODE];

I used:

Code:

<span="ifrm_wrap"><iframe id="ifrm" onload="foo1();"></iframe></span>

and script:

[CODE=javascript]getElementById( "ifrm_wrap").in nerHTML = '<iframe id="ifrm" onload="foo2(); "></iframe>';[/CODE]

Not very nice, but works.

**jianwu** · Dec 8 '07, 04:35 PM

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.

Code:

<iframe style="display:none" id='f1' onload="this.onload_1();" />

[CODE=javascript]document.getEle mentById(f1).on load_1 = function(){aler t('test');}[/CODE]

That works.

**JeremyMiller** · Oct 26 '08, 10:04 PM

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:

Code:

eventPush(document.getElementById('frame_id'),'load',function () {myFrameOnloadFunction();});

function eventPush(obj, event, handler) {
  if (obj.addEventListener) {
    obj.addEventListener(event, handler, false);
  } else if (obj.attachEvent) {
    obj.attachEvent('on'+event, handler);
  }
}

**adamt326** · Aug 4 '09, 05:18 PM

I was having this same problem. My code worked in every browser but IE. Here is my solution:

My original code was:

The working code is:

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.

**splarryl** · Jan 9 '10, 09:51 PM

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:

http://www.dyn-web.com/tutorials/iframes/

And this interesting info:
(accessing IFRAME content)

// IE5.5+ windows
1) document.getEle mentById(iframe Id).contentWind ow
2) document.getEle mentById(iframe Id).contentWind ow.document
or,

// DOM
3) document.getEle mentById(iframe Id).contentDocu ment

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

Go figure.

**WouterH** · Sep 8 '10, 10:00 AM

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.getEle mentById('frame id').setAttribu te('onload', 'whateverfuncti onyouwant();');

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:

Code:

newFrame = document.createElement('iframe');
newFrame.src = 'http://www.google.nl';
newFrame.style.width = '600px';
newFrame.style.height = '2500px';
newFrame.setAttribute('onload', 'scroll(0,0)');
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,

Wouter

**rbuczynski** · Feb 7 '11, 05:09 AM

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.

The FORM:

Code:

<form action="upload.php" method="post" enctype="multipart/form-data" target="myIframe">

The IFRAME:

Code:

<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:

Code:

<?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:

Window: load event - Web APIs | MDN

http://msdn.microsoft.com/en-us/library/cc197055%28v=vs.85%29.aspx#4

The load event is fired when the whole page has loaded, including all dependent resources such as stylesheets, scripts (including async, deferred, and module scripts), iframes, and images, except those that are loaded lazily. This is in contrast to DOMContentLoaded, which is fired as soon as the page DOM has been loaded, without waiting for resources to finish loading.

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:

Code:

<script for="window" event="onload" language="JScript">
  window.status = "Page is loaded!";
</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:

Code:

<?php
echo file_get_contents($_FILES['source-file']['tmp_name']);

<script language="javascript">
// For Mozilla
parent.window.myIframe.setAttribute('onload','myCallbackFunc();');
</script>

<script for="window" event="onload" language="jscript">
// For Microsoft
parent.window.myCallbackFunc();
</script>
?>

I hope this helps!

**Supun Kavinda** · Nov 6 '19, 03:41 AM

The problem can be Iframe loading before the script is executed. This can be prevented by adding the Iframe using Javascript.

Code:

var iframe = document.createElement("iframe");
document.body.appendChild(iframe);

Iframe IE onload problem

Iframe IE onload problem

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment