将事件从父窗口传递给 iframe？( Javascript )
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28672152/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Pass an Event to an iframe from the parent window? ( Javascript )
提问by Moha
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.
在开始这个问题之前，我不得不说我真的到处搜索以找到答案，但什么也没找到。还尝试了许多东西，例如 dispatchevent、postmessage ……但没有任何效果。
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.
我有一个主窗口，其中有 4 个简单的按钮，例如向下箭头、向上箭头、向左和向右箭头。我想创建一个模拟事件传递到这个主窗口中的 iframe。
In that iframe is a page loaded where is an Eventhandler and react on the arrows.
在该 iframe 中加载了一个页面，其中有一个 Eventhandler 并对箭头做出反应。
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?
有没有人知道我如何解决这个问题？
采纳答案by Moha
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!
最后我已经解决了这个问题。我在 iframe 上使用了 parent.document 从 parnet 端捕获事件并在 iframe 上再次创建它们，效果很好！
回答by Joe Fitter
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.
侦听文档上的事件，然后将自定义事件传递给 iframe。
jsfiddle - http://jsfiddle.net/rfkqe64j/
jsfiddle - http://jsfiddle.net/rfkqe64j/
回答by Eesa
Use postMessage. It works perfectly.
使用postMessage. 它完美地工作。
document.getElementById('vid').contentWindow.postMessage(event);
回答by Polv
This works, but with jQuery.
这有效，但使用 jQuery。
window.addEventListener("keydown", (evt) => {
const {type, key} = evt;
parent.$("body").trigger(parent.$.Event(type, {key}));
})
Interestingly, parent.$.Event(evt)directly doesn't work.
有趣的是，parent.$.Event(evt)直接不起作用。
回答by Michael Samteladze
I think this jquery forum thread should help
我认为这个 jquery 论坛帖子应该有帮助
https://forum.jquery.com/topic/how-to-pass-mouse-events-to-an-iframe
https://forum.jquery.com/topic/how-to-pass-mouse-events-to-an-iframe
