JSFiddle - React, Tailwind, and code Playground
JavaScript
// just to prevent infinte loop
if(window.parent !== window.top) return;
// manually create an iframe with same origin
const frame = document.createElement('iframe');
frame.src = location.href;
document.body.appendChild(frame);
// wrap iframe's listner in a script element
const script = document.createElement('script');
script.textContent = `
document.addEventListener('keydown', e => {
console.log('keydown in iframe: ' + e.key)
})
`;
// add the script and register the listener
// when iframe's DOM is ready
frame.addEventListener('load', () => {
frame.contentDocument.body.appendChild(script)
});
// add main page's listener
document.addEventListener('keydown', e => {
console.log('keydown in main page: ' + e.key);
// dispatch a new event
frame.contentDocument.dispatchEvent(
new KeyboardEvent('keydown', {key: e.key})
);
});