将事件从父窗口传递给 iframe？ ( Javascript )答案

【问题标题】：Pass an Event to an iframe from the parent window? ( Javascript )将事件从父窗口传递给 iframe？ ( Javascript )
【发布时间】：2015-02-23 10:57:02
【问题描述】：

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

就是这样。

我有一个主窗口，其中有 4 个简单的按钮，例如向下箭头、向上箭头、向左箭头和向右箭头。我想创建一个模拟事件传递到这个主窗口中的 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);

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

【问题讨论】：

你控制iframe和主窗口中的JS吗？如果没有，没有双方同意是不可能的
我控制他们两个
他们在同一个域上吗？
是的，他们在同一个

标签： javascript iframe eventhandler

【解决方案1】：

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

【讨论】：

【解决方案2】：

使用postMessage。效果很好。

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

【讨论】：

【解决方案3】：

你想要这样的东西：

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/

【讨论】：

不幸的是。这不会将事件传递给 iframe。我在 iframe 中设置了事件侦听器，但它没有得到任何东西:(
你点击了小提琴吗？加载小提琴，聚焦输出，按下一些键，查看控制台。
是的，我做到了。但关键是，它不会影响 iframe。您正在更改事件并将其传递给 iframe 变量，该变量对内部的 iframe 没有影响。尝试加载 test.html 并监听其上的事件。然后将 test.html 加载到您的 iframe 中。你会明白我的意思。

【解决方案4】：

这可行，但使用 jQuery。

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

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

【讨论】：

【解决方案5】：

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

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

【讨论】：