如何让全屏后的iframe元素无需手动点击即可立即响应用户输入？

我完全懂你的困扰——全屏iframe之后还要手动点一下才能操作，太破坏体验了！就像YouTube或者网页游戏那样，我们肯定希望全屏后直接就能无缝操作。下面我来一步步帮你解决这个问题：

首先得搞清楚问题的根源：

1. 浏览器的安全限制：全屏API必须由**用户真实的主动交互（比如手动点击按钮）**触发，你代码里那种自动调用fse.click()的方式会被浏览器直接拦截，完全没用；而且document.onclick = fullscreen会把页面上所有点击都触发全屏，这也不是你想要的效果。
2. 全屏后iframe没自动获焦：就算成功全屏了，浏览器的焦点可能还停留在原来的全屏按钮或者文档上，没自动给到iframe，所以用户的输入自然没反应。

接下来是具体的解决方案：

1. 先修复全屏触发的合法性 #

先把代码里的fse.click()和document.onclick = fullscreen删掉，这些要么被浏览器拦截，要么会导致各种意外全屏。我们只保留用户点击全屏按钮时触发全屏的逻辑，这是浏览器允许的合法操作。

2. 监听全屏切换事件，自动给iframe设焦点 #

当全屏成功后，我们要立刻把焦点强制设置到iframe上，这样用户的键盘、鼠标输入就能直接作用在iframe内部。

我们可以监听浏览器的全屏状态变化事件（要考虑不同浏览器的前缀兼容），一旦检测到进入全屏且当前全屏元素是目标iframe，就主动调用聚焦方法。

3. 跨域iframe的特殊处理（如果你的iframe是跨域链接） #

如果iframe的src是其他域名的页面，你没法直接从父页面操作iframe的焦点，这时候需要和iframe内部的页面配合：

• 要么在iframe的页面里，主动监听窗口聚焦事件，加载时就自动获取焦点；
• 要么用postMessage在父页面和iframe之间通信，告诉iframe在全屏时主动获焦。

给你修改好的完整代码示例 #

<div class="gamescreen">
  <iframe width="100%" height="100%" controls id="gamescreen" frameborder="0" src=""></iframe>
</div>
<div id="fullscreen" title="Fullscreen">
  <img src="https://i.postimg.cc/0ykypt59/gameplayerfullscreen.png" style="width:22px;height:20px;">
</div>

<script>
const iframeElem = document.getElementById("gamescreen");
const fullscreenBtn = document.getElementById("fullscreen");

// 统一的全屏触发函数
function triggerFullscreen() {
  if (iframeElem.requestFullscreen) {
    iframeElem.requestFullscreen();
  } else if (iframeElem.webkitRequestFullscreen) {
    iframeElem.webkitRequestFullscreen();
  } else if (iframeElem.msRequestFullscreen) {
    iframeElem.msRequestFullscreen();
  }
}

// 只让全屏按钮的点击触发全屏
fullscreenBtn.onclick = triggerFullscreen;

// 全屏状态变化的处理函数
function handleFullscreenChange() {
  // 检测当前是否处于全屏状态，且全屏元素是我们的iframe
  const activeFullscreenElem = document.fullscreenElement || 
                               document.webkitFullscreenElement || 
                               document.msFullscreenElement;
  if (activeFullscreenElem === iframeElem) {
    // 先给iframe本身设焦点
    iframeElem.focus();
    // 如果是同域iframe，还可以直接让内部文档也聚焦
    if (iframeElem.contentWindow) {
      iframeElem.contentWindow.focus();
    }
  }
}

// 绑定不同浏览器的全屏变化事件
document.addEventListener('fullscreenchange', handleFullscreenChange);
document.addEventListener('webkitfullscreenchange', handleFullscreenChange);
document.addEventListener('MSFullscreenChange', handleFullscreenChange);
</script>

额外补充 #

• 千万不要尝试用自动触发点击的方式绕过浏览器的安全限制，这是行不通的，所有现代浏览器都有这个安全校验。
• 如果是跨域iframe，你需要在iframe的目标页面里加一段配合代码：

  // 在iframe内部的页面中添加
  window.addEventListener('focus', () => {
    document.body.focus();
  });
  // 或者通过postMessage接收父页面的指令
  window.addEventListener('message', (e) => {
    if (e.data === 'focus-iframe') {
      window.focus();
    }
  });
  

  然后在父页面的handleFullscreenChange函数里添加一行：

  iframeElem.contentWindow.postMessage('focus-iframe', 'https://目标域名.com'); // 这里替换成你iframe的真实域名，别用*更安全
  

内容来源于stack exchange