从父窗口将事件传递给iframe？ （Javascript）

Question

在开始这个问题之前，我不得不说我到处寻找答案但没找到。还试过像dispatchevent，postmessage，......但没有任何效果。

情况就是这样。

我有一个主窗口，我有4个简单的按钮，如向下箭头，向上箭头，向左箭头和向右箭头。我想创建一个事件模拟传递给这个主窗口中的iframe。

因为iframe是一个加载的页面，其中是一个Eventhandler并对箭头作出反应。

我试过以下但没有工作

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);        

有没有人知道如何解决这个问题？

Answer 1

你想要这样的东西：

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);
});

在文档上侦听事件，然后将自定义事件传递给iframe。

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

Answer 2

最后，我已经解决了这个问题。我在我的iframe上使用了parent.document从parnet端捕获事件并在iframe上再次创建它们并且效果很好！

Answer 3

这有效，但使用jQuery。

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

有趣的是，parent.$.Event(evt)直接不起作用。

Answer 4

使用postMessage。效果很好。

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

Answer 5

我认为这个jquery论坛帖子应该有帮助

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