將父窗口中的keydown事件轉發到包含reveal.js的iframe

我已經實現了一個HTML頁面，該頁面在iframe上包裝了一些額外的功能。 iframe包含一個reveal.js演示文稿。每當鍵盤上的按鍵被按下，並且父框架（不是iframe）被聚焦時，我想將事件轉發到iframe（例如，rightArrow被按下（父母聚焦） - > rightArrow在iframe中執行，就像它很專注 - 最終會進入下一張幻燈片）。將父窗口中的keydown事件轉發到包含reveal.js的iframe

我負責這兩個框架，他們最終將託管在同一個域。出於發展原因，我開始使用禁用安全功能的瀏覽器。

我嘗試了幾種基於jQuery方法，就像

$(document).keydown((event) => { 
    var e = jQuery.Event("keydown", { keyCode: event.keyCode }); 
    $('#revealPresentation')[0].contentWindow.$('body').trigger(e); 
    });

，並沒有能夠讓他們的工作。我回到普通的JS方法：

$(document).keydown((event) => { 
    var newEvent = new KeyboardEvent("keydown", { 
     key: event.originalEvent.key, code: event.originalEvent.code, 
     charCode: event.originalEvent.charCode, keyCode: event.originalEvent.keyCode, 
     which: event.originalEvent.which 
    }); 
    document.getElementById("revealPresentation") 
    .contentWindow.document.dispatchEvent(newEvent); 
    });

那也不工作。我想我是在對錯誤的元素髮送事件，但我不知道什麼是正確的元素，或者其他什麼可能是錯誤的。任何人都能夠提供一個有效的例子，或者將我指向正確的方向嗎？我已經發現了一些類似的問題，但他們主要處理自定義事件，並將相應的事件偵聽器添加到iframe代碼中。我不想以任何方式更改iframe。

解決方案： 根據this post WebKit的有，最終將無法填補新創建的KeyboardEvent的keyCode屬性的錯誤。這個屬性在reveal.js中得到了評估，以便觸發一些動作（如下一張幻燈片）。我是能夠實現一種變通方法（代碼建議中所提到的職位）：

document.addEventListener('keydown', (e) => { 
      let frame = document.getElementById('revealPresentation').contentDocument; 
      let newEvent = new Event('keydown', {key: e.key, code: e.code, composed: true, charCode: e.charCode, keyCode: e.keyCode, which: e.which, bubbles: true, cancelable: true, which: e.keyCode}); 
      newEvent.keyCode = e.keyCode; 
      newEvent.which = e.keyCode; 
      frame.dispatchEvent(newEvent); 
     });

來源

2017-08-02 Roy

真奇怪，你的代碼似乎沒有什麼我錯了。我也用普通的javascript測試了它，並且一切正常。

例子：https://jsfiddle.net/d7ap1ntz/

聽衆在父框架

document.addEventListener('keydown', e => { 
    const frame = /*your iframe element*/; 

    // dispatch a new event 
    frame.contentDocument.dispatchEvent(
    new KeyboardEvent('keydown', {key: e.key}) 
); 
})

監聽器IFRAME

document.addEventListener('keydown', e => { 
    console.log('keydown in iframe: ' + e.key) 
})

莫非可能在您的IFRAME聽衆造成的？

注意： iframe和它的監聽器是在上面的例子中手動插入的，但它也可以通過普通的HTML標籤工作。

來源

2017-08-05 15:30:16 Microloft

非常感謝！這使我指出了正確的方向。我已經爲該問題添加了一個解決方案。這是WebKit bug + reveal.js使用不推薦功能的組合。 – Roy

將父窗口中的keydown事件轉發到包含reveal.js的iframe

回答

相關問題