0

I defined an iframe in my html and want to add keyboard listener on it. Below is the code:

const iframe = $(myId).find('iframe')[0];
iframe.requestFullscreen();
$(iframe)[0].contentWindow.document.keydown((e) => console.log('keydown', e));

it makes the iframe fullscreen and attach the keydown event. The fullscreen works fine but I got Uncaught DOMException: Blocked a frame with origin "http://localhost:8080" from accessing a cross-origin frame. error. I think it is a browser policy but I wonder whether I can get rid of it. If not, is there any way for me to add iframe key event control?

I have checked this post:

SecurityError: Blocked a frame with origin from accessing a cross-origin frame

It answers part of my question. If I can capture keyboard event in an iframe, then I can use the method mentioned in that post to solve the message communication between main and iframe window issue. But I couldn't find an answer that how to add keyboard/mouse listeners on an iframe.

Joey Yi Zhao
  • 23,254
  • 37
  • 138
  • 276
  • Possible duplicate of [SecurityError: Blocked a frame with origin from accessing a cross-origin frame](https://stackoverflow.com/questions/25098021/securityerror-blocked-a-frame-with-origin-from-accessing-a-cross-origin-frame) – bugwheels94 Mar 09 '18 at 23:26
  • I think that post answers part of my question. My question is about how to add keyboard event listener in a iframe. If I can add a keyboard event on iframe, then I can use the answer in that post to send messages to the main window. – Joey Yi Zhao Mar 10 '18 at 04:36
  • So, first, try to add the event listener with both page and iframe running in the same domain and see what happens. Update your question when you have new results. – Triby Mar 10 '18 at 04:50
  • Could you let me know how to add event listener on the iframe? This is my origin question. I got the cross-origin error when I adding the listener on iframe. – Joey Yi Zhao Mar 10 '18 at 04:59

0 Answers0