这个问题我之前也遇到过，Tab键会让浏览器自动把焦点转移到页面其他可聚焦元素（比如地址栏、页面按钮），而iframe默认不会主动抢回焦点，哪怕你点击它也可能没生效。结合你提到的setInterval思路，给你几个完整的解决办法：

方法1：定期强制给iframe设置焦点（简单直接） #

这就是你想到的方向的完整实现，通过定时器每隔一段时间给iframe的内容窗口设置焦点，确保键盘事件能被监听。

在你的index.html里添加这段代码：

<!-- 假设你的iframe标签id是content -->
<iframe id="content" src="iframe.html"></iframe>

<script>
// 每隔100ms尝试给iframe内容窗口设置焦点
setInterval(() => {
  const iframe = document.getElementById('content');
  if (iframe && iframe.contentWindow) {
    try {
      iframe.contentWindow.focus();
    } catch (error) {
      // 如果iframe和父页面跨域会报错，这里可以忽略或做简单提示
      console.log('无法设置焦点，可能存在跨域限制:', error);
    }
  }
}, 100);
</script>

注意：这个方法适合全屏游戏这类不需要用户切换到其他页面元素的场景，缺点是如果有跨域问题会失效，而且可能干扰用户正常的焦点切换操作。

方法2：点击iframe时强制聚焦到内部元素（更友好） #

这个方案只在用户主动点击iframe时恢复焦点，不会强制抢占用户的焦点，体验更好。

第一步：在index.html中给iframe添加点击事件 #

<iframe id="content" src="iframe.html"></iframe>

<script>
const iframe = document.getElementById('content');
iframe.addEventListener('click', () => {
  if (iframe.contentWindow) {
    try {
      // 先聚焦到iframe的内容窗口
      iframe.contentWindow.focus();
      // 再精准聚焦到游戏的canvas元素（如果有）
      const gameCanvas = iframe.contentDocument.querySelector('canvas');
      if (gameCanvas) {
        gameCanvas.focus();
      }
    } catch (error) {
      console.log('聚焦失败:', error);
    }
  }
});
</script>

第二步：在iframe.html中给canvas设置可聚焦属性 #

给canvas添加tabindex="0"，让它可以成为焦点目标：

<canvas tabindex="0"></canvas>

<script>
// 原来的键盘监听可以保留，同时也可以给canvas单独加监听，确保焦点在canvas时能触发
function press(e) {
  // 你的键盘事件处理逻辑
}

window.addEventListener('keypress', press, false);
document.querySelector('canvas').addEventListener('keypress', press, false);
</script>

方法3：拦截父页面的Tab键（仅限不需要Tab导航的场景） #

如果你的页面不需要用户用Tab键切换其他元素，可以直接拦截Tab的默认行为，防止焦点离开iframe：

<iframe id="content" src="iframe.html"></iframe>

<script>
document.addEventListener('keydown', (e) => {
  if (e.key === 'Tab') {
    // 阻止浏览器默认的Tab焦点切换行为
    e.preventDefault();
    // 确保iframe保持焦点
    const iframe = document.getElementById('content');
    if (iframe.contentWindow) {
      iframe.contentWindow.focus();
    }
  }
});
</script>

注意：这个方法会影响用户正常的Tab导航，除非你的页面只有iframe游戏，否则不推荐使用。

一般来说，方法2是最通用的，既解决了焦点问题，又不会影响用户的正常操作。如果是全屏游戏，方法1也可以考虑。

内容的提问来源于stack exchange，提问作者Phildo