如何用JavaScript检测页面是否在允许全屏的跨域iframe中？

这个问题我之前处理过，跨域场景下确实没法直接读取父页面里iframe的allowfullscreen属性——同源策略会直接阻止你这么做。不过我们可以换个务实的思路：直接尝试调用浏览器的全屏API，通过结果反推iframe是否允许全屏。

核心原理 #

当iframe没有设置allowfullscreen="true"（或现代的allow="fullscreen"）时，调用全屏API会抛出SecurityError或NotAllowedError；如果设置了允许全屏，API调用会成功（之后我们再退出全屏即可）。

实用检测函数（兼容现代浏览器） #

下面是封装好的异步检测函数，逻辑清晰且处理了常见的边界情况：

async function isIframeAllowFullscreen() {
  try {
    // 先检查当前是否处于全屏状态，是的话先退出
    if (document.fullscreenElement) {
      await document.exitFullscreen();
    }
    // 尝试让页面根元素进入全屏
    await document.documentElement.requestFullscreen();
    // 成功进入的话，再退出全屏恢复原样
    await document.exitFullscreen();
    return true;
  } catch (err) {
    // 捕获到安全错误，说明iframe不允许全屏
    if (err.name === 'SecurityError' || err.name === 'NotAllowedError') {
      return false;
    }
    // 其他错误（比如临时的浏览器异常）也默认返回不允许
    return false;
  }
}

兼容旧浏览器的版本 #

如果需要兼容Chrome旧版、Firefox旧版等，可以加上浏览器前缀处理：

async function isIframeAllowFullscreen() {
  const docElement = document.documentElement;
  // 兼容不同浏览器的全屏请求API
  const requestFullscreen = docElement.requestFullscreen || 
                            docElement.webkitRequestFullscreen || 
                            docElement.mozRequestFullScreen || 
                            docElement.msRequestFullscreen;
  // 兼容不同浏览器的退出全屏API
  const exitFullscreen = document.exitFullscreen || 
                         document.webkitExitFullscreen || 
                         document.mozCancelFullScreen || 
                         document.msExitFullscreen;

  try {
    // 检查是否已处于全屏状态
    const isFullscreen = document.fullscreenElement || 
                         document.webkitFullscreenElement || 
                         document.mozFullScreenElement || 
                         document.msFullscreenElement;
    if (isFullscreen) {
      await exitFullscreen.call(document);
    }
    // 尝试请求全屏
    await requestFullscreen.call(docElement);
    await exitFullscreen.call(document);
    return true;
  } catch (err) {
    if (err.name === 'SecurityError' || err.name === 'NotAllowedError') {
      return false;
    }
    return false;
  }
}

使用注意事项 #

1. 必须在用户交互上下文调用：浏览器安全限制要求全屏API必须在用户触发的事件（比如点击、触摸）中调用，否则会直接被阻止。所以检测逻辑最好绑定在按钮点击事件里：

document.getElementById('fullscreen-btn').addEventListener('click', async () => {
  const canFullscreen = await isIframeAllowFullscreen();
  if (canFullscreen) {
    // 显示全屏按钮或执行全屏逻辑
    console.log('当前iframe允许全屏');
  } else {
    // 隐藏全屏按钮或提示用户无法全屏
    console.log('当前iframe不允许全屏');
  }
});

2. 区分用户拒绝和iframe限制：如果用户手动拒绝了全屏请求，也会抛出NotAllowedError，这时候你可以根据场景决定是否提示用户，还是直接按“无法全屏”处理。

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