Question

我已经实现了一个HTML页面，它围绕iframe包含了一些额外的功能。 iframe包含reveal.js演示文稿。每当按下键盘上的键并且父帧（而不是iframe）被聚焦时，我想将事件转发到iframe（例如，按下rightArrow（父聚焦） - ＆gt; 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。

解决方案： 根据{{3}} 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);
        });

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标记。

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

1 个答案: