25

Why is the following not working:

//iframe:
window.parent.$(document).trigger('complete');

//parent window:
$(document).bind('complete', function(){
  alert('Complete');
});

while the following IS working:

//iframe:
window.parent.$('body').trigger('complete');

//parent window:
$('body').bind('complete', function(){
  alert('Complete');
});

?

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Vincent
  • 16,086
  • 18
  • 67
  • 73
  • Possible duplicate of [trigger click event in iframe parent window](http://stackoverflow.com/questions/3521947/trigger-click-event-in-iframe-parent-window) – Mark Schultheiss May 11 '16 at 17:09

4 Answers4

44

The way events are tracked, you can only trigger or receive events on the same document.

try

window.parent.$(window.parent.document).trigger('complete');
moribvndvs
  • 42,191
  • 11
  • 135
  • 149
  • I essentially have the same problem with YUI3, any tips? – danjah Feb 05 '11 at 07:15
  • @Danjah I've never really used YUI before, so I'm not sure I can help. However, it is entirely possible that a similar approach can be used: window.parent.YUI.use('node-event-simulate', function(Y) { Y.one(window.parent.document).simulate('click'); }); However, you may just want to expose a method on the parent to do the required triggering on behalf of your iframe, ala @Ken Redler's suggestion below. – moribvndvs Feb 05 '11 at 11:14
  • Alrighty, thanks very much - I'll definitely give that a bash, I was a bit wary to start simulating events before trying to trigger existing handlers... but I may have to. – danjah Feb 05 '11 at 21:50
  • +1 Exactly what i needed! I wanted to trigger the resize event of the parent window from inside my iframe. – ggzone Jan 05 '16 at 14:25
  • I would like to specifically point out (because it took me a second to get it) that the problem was specifically that `document` refers to `window.document`, i.e., the iframe's `document`. To get the parent window's document, you need to—as this answer does—reference it as `window.parent.document`. – Hutch Moore May 26 '16 at 19:24
  • It is the correct way to do this, I tried many other ways e.g. $(window.parent.document).trigger('resize'); and window.parent.document.dispatchEvent(new Event('resize')); both did not work, @HackedByChinese solution surely did. – Jobst Apr 19 '17 at 06:37
13

You might try adding a triggering function in the parent document, then calling it as a regular function from the iframe. This should ensure you're triggering the event in the right document context.

// In Parent
function triggerComplete () {
  $(document).trigger('complete');
}

// In iFrame
window.parent.triggerComplete();
Ken Redler
  • 23,863
  • 8
  • 57
  • 69
0

Answering directly to OP's question: because there is a bug in the first code example.

You pass the iframe's document object to the parent's $ function. This does not make much sense.

  1. Parent's jQuery instance can not trigger event on DOM object of other window;

  2. Even if it could, it is an iframe's document, but you try to listen for the event on parent's document.

This would probably work:

window.parent.$(window.parent.document).trigger('complete');
C-F
  • 1,597
  • 16
  • 25
-7

Check this solution, it's very tricky:

top.frames['frame_name'].document.getElementById('Processing').style.display = 'none';
Krzysztof Atłasik
  • 21,985
  • 6
  • 54
  • 76
Alexander Todorov
  • 1