Triggering an event handler on an element inside iframe from parent frame
event-handling, iframe, jquery
Solution
Here is how you can do it.
document.getElementById('ifrmMsg').contentWindow.$('a:first').trigger('click');
- Demo: http://jsbin.com/aYijiLe/2
- Parent: http://jsbin.com/aYijiLe/2/edit
- iFrame: http://jsbin.com/IrogeBi/1/edit
You can also use `postMessage()` for this purpose. It will work cross-domain as well. However JS inside the iframe must listen to the `message` event, i.e. you need to control the source of the iframe.
- Demo: http://jsbin.com/ILAsEmE/1
- Parent: http://jsbin.com/ILAsEmE/1/edit
- iframe: http://jsbin.com/uZEQuTa/2/edit
Problem
I have a html page. Inside it I use jQuery to attach click event on a link. Then I use iframe to reference this html page from another page. However I could not trigger the event attached on that link with js (when I click the link with the mouse, the event gets triggered with no problem). How can I trigger that event from parent frame? I have tried the following but it does not work: ``` var frame = $('#mainFrame'); // the iframe I am trying to access var link = $('a.btn', frame.contents()); // the element is found correctly link.trigger('click'); // nothing happens. var e = link.data('events'); // e is undefined. ```