Before starting this question, i have to say I really searched everywhere to find the answer but nothing found. Also tried manythings like dispatchevent, postmessage, ... but nothing worked.

Here is the case.

I have a main windows, where I have 4 simple buttons, like downarrow, uparrow, left and right arrow. I want to create a simulation of events pass to the iframe which is in this main window.

In that iframe is a page loaded where is an Eventhandler and react on the arrows.

I tried following but did not worked

var event = document.createEvent('KeyboardEvent'); // create a key event define the event
event.initKeyboardEvent("keypress",       // typeArg,                                                           
true,             // canBubbleArg,                                                        
true,             // cancelableArg,                                                       
null,             // viewArg,  Specifies UIEvent.view. This value may be null.     
false,            // ctrlKeyArg,                                                               
false,            // altKeyArg,                                                        
false,            // shiftKeyArg,                                                      
false,            // metaKeyArg,                                                       
39,               // keyCodeArg (39 is the right arrow key ),                                                      
0);              // charCodeArg);

document.getElementById('vid').dispatchEvent(event);        

Is there anybody who has an idea how I can solve this issue?

Before starting this question, i have to say I really searched everywhere to find the answer but nothing found. Also tried manythings like dispatchevent, postmessage, ... but nothing worked.

Here is the case.

I have a main windows, where I have 4 simple buttons, like downarrow, uparrow, left and right arrow. I want to create a simulation of events pass to the iframe which is in this main window.

In that iframe is a page loaded where is an Eventhandler and react on the arrows.

I tried following but did not worked

var event = document.createEvent('KeyboardEvent'); // create a key event define the event
event.initKeyboardEvent("keypress",       // typeArg,                                                           
true,             // canBubbleArg,                                                        
true,             // cancelableArg,                                                       
null,             // viewArg,  Specifies UIEvent.view. This value may be null.     
false,            // ctrlKeyArg,                                                               
false,            // altKeyArg,                                                        
false,            // shiftKeyArg,                                                      
false,            // metaKeyArg,                                                       
39,               // keyCodeArg (39 is the right arrow key ),                                                      
0);              // charCodeArg);

document.getElementById('vid').dispatchEvent(event);        

Is there anybody who has an idea how I can solve this issue?

• javascript
• iframe
• eventhandler

• Do you control both the JS in the iframe and in the main window? If not, it's just not possible without agreement from both parties – winhowes Commented Feb 23, 2015 at 11:02
• I control both of them – Moha Commented Feb 23, 2015 at 11:27
• Are they on the same domain? – winhowes Commented Feb 23, 2015 at 17:05
• Yes, they are on the same – Moha Commented Feb 25, 2015 at 7:40

5 Answers 5

Use postMessage. It works perfectly.

document.getElementById('vid').contentWindow.postMessage(event);

you want something like this:

var iframe = document.getElementById('something');
var iframeEvent = new Event('iframe-keypress');

document.addEventListener('keypress', function (e) {
    iframe.dispatchEvent(iframeEvent);
});

iframe.addEventListener('iframe-keypress', function (e) {
    console.log(e);
});

listen for the event on the document then pass down a custom event to the iframe.

jsfiddle - http://jsfiddle.net/rfkqe64j/

Finally I have sorted out the issue. I have used parent.document on my iframe to catch the events from the parnet side and create them again on iframe and it works great!

This works, but with jQuery.

window.addEventListener("keydown", (evt) => {
    const {type, key} = evt;
    parent.$("body").trigger(parent.$.Event(type, {key}));
})

Interestingly, parent.$.Event(evt) directly doesn't work.

I think this jquery forum thread should help

https://forum.jquery.com/topic/how-to-pass-mouse-events-to-an-iframe