Pass an Event to an iframe from the parent window? ( Javascript )

Question

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?

Quarterhour

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 – Finally

I control both of them – Quarterhour

Are they on the same domain? – Finally

Yes, they are on the same – Quarterhour

Answer 1

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!

Quarterhour

Ummm... so, would be nice if you could include some code. Not much of an answer without it. Money, mouth. Please. – Adit

Answer 2

Use postMessage. It works perfectly.

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

Keiko

Does this work without a special reciever in the iFrame document? So just any document unaltered in the iFrame? – Adit

Answer 3

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/

Undamped

Unfortunately. this does not pass the event to the iframe. I have set the event listener in the iframe and it does not get any thing:( – Quarterhour

Did you click on the fiddle? load the fiddle, focus the output, push some keys, look in the console. – Undamped

Yes I did it. but the point is, it does not affect on the iframe. You are changing and passing the event to iframe variable which has no affect on the iframe internally. Try to load a test.html and listen for events on it. then load the test.html into your iframe. You will understand what I exactly mean. – Quarterhour

Answer 4

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.

Quickel

Answer 5

I think this jquery forum thread should help

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

Publish

Please qualify your aegument. Show examples and solid proof. There is no 'should' or 'maybe' in an answer. Show that you have done it, and that it works. – Adit