title: Forward a keydown event from the parent window to an iframe that contains reveal.js
body: <p>I've implemented a HTML page that wraps some extra functionality around an iframe. The iframe contains a reveal.js presentation. Whenever a key on the keyboard is pressed and the parent frame (not the iframe) is focused, I want to forward the event to the iframe (e.g. rightArrow is pressed (parent focused) --> rightArrow is executed in the iframe, as if it was focused - eventually going to the next slide).</p>
  
  <p>I am in charge of both frames and they will be eventually hosted at the same domain. For developing reasons, I started a browser with disabled security features.</p>
  
  <p>I tried several JQuery based methods, like </p>
  
  <pre><code>$(document).keydown((event) =&gt; {
      var e = jQuery.Event( "keydown", { keyCode: event.keyCode } );
      $('#revealPresentation')[0].contentWindow.$('body').trigger(e);
    });
  </code></pre>
  
  <p>and wasn't able to get them to work. I stepped back to plain JS methods:</p>
  
  <pre><code>$(document).keydown((event) =&gt; {
      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);
    });
  </code></pre>
  
  <p>that also aren't working. I guess I'm dispatching the event against the wrong element, but I don't know what's the right element or if anything else might be wrong. Is anyone able to provide a working example or point me into the right direction? I already found some similar questions, but they mostly deal with custom events and added the appropriate event listener to the iframe code. I don't want to change the iframe in any way.</p>
  
  <p><strong>Solution:</strong>
  According to <a href="https://stackoverflow.com/a/12522752/8404508">this post</a> WebKit has a bug that eventually won't fill the keyCode property of a newly created KeyboardEvent. Exactly this property gets evaluated in reveal.js in order to trigger some actions (like next slide). I was able to implement a workaround (code was suggested in the mentioned post):</p>
  
  <pre><code>document.addEventListener('keydown', (e) =&gt; {
              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);
          });
  </code></pre>