14

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?

Moha
  • 201
  • 1
  • 2
  • 7

5 Answers5

5

Use postMessage. It works perfectly.

document.getElementById('vid').contentWindow.postMessage(event);
Eesa
  • 2,762
  • 2
  • 32
  • 51
  • Does this work without a special reciever in the iFrame document? So just any document unaltered in the iFrame? – jdmayfield Apr 05 '23 at 06:42
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/

Joe Fitter
  • 1,309
  • 7
  • 11
  • 1
    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:( – Moha Feb 23 '15 at 12:06
  • Did you click on the fiddle? load the fiddle, focus the output, push some keys, look in the console. – Joe Fitter Feb 23 '15 at 12:30
  • 4
    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. – Moha Feb 23 '15 at 13:19
2

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!

Moha
  • 201
  • 1
  • 2
  • 7
  • Ummm... so, would be nice if you could include some code. Not much of an answer without it. Money, mouth. Please. – jdmayfield Apr 05 '23 at 06:29
0

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.

Polv
  • 1,918
  • 1
  • 20
  • 31
-3

I think this jquery forum thread should help

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

Michael Samteladze
  • 1,310
  • 15
  • 38
  • 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. – jdmayfield Apr 05 '23 at 06:35