javascript - 将 keydown 事件从父窗口转发到包含 reveal.js 的 iframe

Question

我已经实现了一个 HTML 页面，它围绕 iframe 包装了一些额外的功能。 iframe 包含 reveal.js 演示文稿。每当按下键盘上的一个键并且父框架(不是 iframe)被聚焦时，我想将事件转发到 iframe(例如 rightArrow 被按下(父聚焦)-> rightArrow 在 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 中被评估以触发一些 Action (比如下一张幻灯片)。我能够实现一个解决方法(在提到的帖子中建议了代码):

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);
        });

Answer 1

真奇怪，您的代码对我来说没有任何问题。我还在纯 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 标记工作。