У меня есть веб-сайт, на который встраивается другой веб-сайт с помощью iFrame. На обоих веб-сайтах есть прослушиватели событий для keydown, но одновременно работает только один из них.
родительский индекс. html:
<head>
<script>
...
$(document).ready(() => {
document.addEventListener('keydown', (e) => {
console.log('main site key pressed', e.keyCode);
}));
document.getElementById('my-iframe').src='./index.html'; // ReactJS index.html
});
</script>
</head>
<body>
<iframe id='my-iframe'></iframe>
</body>
дочерний (ReactJS) сайт
const myComponent = () => {
useEffect(() => {
document.addEventListener('keydown', (e) => {
console.log('react key pressed', e.keyCode);
});
}, []);
return (<div>My Site Works</div>);
}
Код ReactJS предоставляет функцию в окне, которое открывает диалоговое окно. Когда страница запускается, я буду видеть «нажата клавиша основного сайта» для каждого нажатия клавиши, пока я не вызову функцию в окне (из родительского), чтобы открыть диалоговое окно в реакции. Как только это диалоговое окно открывается, я начинаю видеть «нажата клавиша реакции», но больше не вижу «нажата клавиша основного сайта».
Оба слушателя, похоже, существуют в документе (согласно devTools), но я не уверен почему он слушает только по одному и почему диалоговое окно меняет местами, какое из них слушает. Я ожидал, что оба слушателя будут слушать во время загрузки страницы, и я буду видеть оба сообщения при каждом нажатии клавиши, верно?
Кто-нибудь знает, что не так, или как я могу сделать оба слушателя доступными в любое время?
Спасибо!