将事件从父 window 传递到 iframe？ ( Javascript )

Question

在开始这个问题之前，我不得不说我真的到处寻找答案，但没有找到。还尝试了很多事情，例如 dispatchevent、postmessage 等，但没有任何效果。

是这样的

我有一个主 windows，其中有 4 个简单的按钮，例如向下箭头、向上箭头、向左箭头和向右箭头。我想创建一个事件模拟传递给位于此主要 window.

中的 iframe

在那个 iframe 中加载了一个页面，其中有一个事件处理程序并对箭头做出反应。

我尝试关注但没有成功

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

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

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

Answer 2

你想要这样的东西：

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 3

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

Answer 4

这有效，但 jQuery。

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

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

Answer 5

使用postMessage。它完美运行。

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

将事件从父 window 传递到 iframe？ ( Javascript )

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

javascript

iframe

eventhandler