從父窗口將事件傳遞給iframe？ （Javascript）

Question

在開始這個問題之前，我不得不說我到處尋找答案，但沒有找到答案。 還試過像dispatchevent，postmessage，......但沒有任何效果。

情況就是這樣。

我有一個主窗口，我有4個簡單的按鈕，如downarrow，uparrow，左右箭頭。 我想創建一個事件模擬傳遞給這個主窗口中的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

我認為這個jquery論壇帖子應該有所幫助

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