iframe onload in IE7/8 with Javascript

Question

I have an iframe loading into a parent page. The iframe contains a sequence of forms, and I'd like to take action on the parent page every time the iframe content in reloaded (ie, after a form is submitted in the iframe content). The current code is located on the parent page and works in all the big players except IE (I'm only concerned with IE 7 & 8).

var iframe = document.getElementById('theiframe');
function refresh( ) {
  alert('foo');
}
if (iframe.attachEvent) iframe.attachEvent('onload', refresh);
else iframe.onload = refresh;

What am I missing that would prevent this from being effective in IE?

Try referencing the iframe's document: var iframe = document.getElementById('theiframe').document; (not an answer because I'm guessing :) ) — Cfreak, Jun 23 '11 at 14:38

score 4 · Accepted Answer · edited Jan 28 '13 at 10:28

4

Replace:

iframe.onload = refresh

with:

iframe.attachEvent('load', refresh, false);

To clear any confusion:

var iframe = document.getElementById('theiframe');
function refresh( ) {
  alert('foo');
}

if (iframe.attachEvent) iframe.attachEvent('onload', refresh);
else iframe.addEventListener('load', refresh, false)

edited Jan 28 '13 at 10:28

cypher

429
1
4
16

answered Jun 23 '11 at 14:38

Joe

80,724
18
127
145

Is there a difference between `load` and `onload`? – Chris Tonkinson Jun 23 '11 at 14:50
IE calls the event onload, while must other browsers call it load. – Joe Jun 23 '11 at 14:59
I did wind up adding an `else if (iframe.addEventListener) ...` clause before the end. Good call! – Chris Tonkinson Jun 23 '11 at 15:41
1

I found IE prefers: iframe.attachEvent("onload", refresh); – Sam Watkins Mar 29 '12 at 06:57
@SamWatkins, that case is covered in the if statement. If attachEvent is define it uses that. – Joe Aug 19 '12 at 15:15
If non of this work for you check out my answer here: http://stackoverflow.com/a/11874986/1260020 – simo Aug 31 '12 at 15:50
This did not work for me for internet explorer 11. The alert('foo') fires when the parent page is first loaded; but, does not fire when the form in the iframe is submitted. – Mark Dec 13 '16 at 19:42
Mark, the question is clearly requesting ie7 and ie8. – Joe Dec 16 '16 at 13:35

score 1 · Answer 2 · answered Jun 23 '11 at 15:05

1

You can call it from the iframe by calling parent.refresh() when you are done with a submit.

answered Jun 23 '11 at 15:05

Mic

24,812
9
57
70

While I ultimately have control over both the parent and iframe, modifying the iframe in any way is prohibitively difficult. – Chris Tonkinson Jun 23 '11 at 15:40
1

ok, but sometimes the `onload` event fires, while all the job is not done in the `iframe`. I found adding the "I'm done" command in the iframe more reliable for all browsers. – Mic Jun 23 '11 at 16:27
In this case it doesn't matter that the iframe contents (resources, DOM, etc) are or aren't finished loading, it just matters that "the user has begun viewing a new page." Great point though. – Chris Tonkinson Jun 23 '11 at 18:20
This solution did not work for me in IE 11. The parent page remained unaffected. – Mark Dec 13 '16 at 19:25
@Mic, my motivation is to provide information to people who are arriving here today from google searches. They will likely be looking for a solution to a current problem; not a problem from 5 years ago. To reiterate, not a personal attack, merely saving some people some time. – Mark Dec 17 '16 at 20:07
@Mark, if IE does not accept that anymore, you can use `parent.postMessage` with a listener in the parent's page that will refresh itself – Mic Dec 19 '16 at 08:42

iframe onload in IE7/8 with Javascript

2 Answers2

Linked