Triggering a jQuery event from iframe

Question

Here's the scenario, I have events happening from within an iframe and up until now everything is working well. I just ran into the problem where I want to dispatch an event from the iframe to the parent.

I'm using this to trigger the event from the iframe:

$('body', window.parent.document).trigger('eventName');
//and I've also tried
$(window.parent.document).find('body').trigger('eventName');

And then in the parent page I've listening for the event like this:

$('body').bind('eventName', myFunction)

I know the script gets to the trigger because I stuck a console.log before and after the trigger. The iframe is on the same domain so there is no problem there.

I can call a function on the parent page directly like this: window.parent.functionName but I was wondering if this is possible with using using an event based solution.

Solved

@cwolves answer is working great:

parent.$('body').trigger( 'eventName' );

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

score 23 · Accepted Answer · 2011-07-14T18:07:32.547

23

If you have jQuery loaded in the parent frame, try:

parent.$('body').trigger( 'eventName' );

If not, try this, I'm not sure if it will work but I just looked at the jQuery source and think it may:

var pBody = $( parent.document.body );
pBody.trigger( 'eventName', pBody.data() );

(And do the same thing when binding eventName) The issue, as far as I can tell, is that jQuery is using the data from the local page, which is causing issues because it looks like it's trying to load data from the other frame. In other words, it's a mess, but there are data params accepted in .bind, .trigger, etc.

edited Jul 14 '11 at 18:07

answered Jul 14 '11 at 17:49

No luck. The first is undefined. Trigger does have a second parameter but it is data you want to pass to the bound function. The event is never reaching the bound event callback therefore it will do nothing in this situation (I did try it and the event is never being heard) – locrizak Jul 14 '11 at 18:04
Sorry - first shouldn't have "document.body" in it. Edited. – Jul 14 '11 at 18:07
Great the `parent.$('body').trigger('eventName')` works great. Thanks a lot! – locrizak Jul 14 '11 at 18:34

score 1 · Answer 2 · answered Jul 14 '11 at 18:08

1

Try this in the iframe js code

var parentWin = $( window.parent.document.body );
jQuery.event.trigger('eventName', parentWin.data(), parentWin );

answered Jul 14 '11 at 18:08

ShankarSangoli

69,612
13
93
124

This didn't work. @cwolves first part of his answer works. Thanks – locrizak Jul 14 '11 at 18:33

score -2 · Answer 3 · answered Jul 14 '11 at 17:45

-2

So this will be the code that lives in your iFrame:

$('#myElem').click(function() {

    window.parent.success_msg();

});

And this code needs to be in the parent window:

window.success_msg = function() {

    // Your code goes here

};

You also need to be running this on a server, either localhost or hosted.

answered Jul 14 '11 at 17:45

Seth

6,240
3
28
44

1

How is this different than the last paragraph of the question, `I can call a function on the parent page directly like this: window.parent.functionName but I was wondering if this is possible with using using an event based solution.` – locrizak Jul 14 '11 at 17:53

Triggering a jQuery event from iframe

Solved

3 Answers3

Linked