Trigger events in iframe's parent window

问题

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');
});

?

回答1:

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

try

window.parent.$(window.parent.document).trigger('complete');

回答2:

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();

回答3:

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');

回答4:

Check this solution, it's very tricky:

top.frames['frame_name'].document.getElementById('Processing').style.display = 'none'; 

来源：https://stackoverflow.com/questions/4601325/trigger-events-in-iframes-parent-window