如何用JavaScript实现页面加载时自动将指定div切换为全屏模式

所有主流浏览器的全屏API都有强制安全限制：requestFullscreen() 方法仅能在用户主动触发的交互事件上下文中调用，这类交互包括用户真实点击、按下键盘、触摸屏幕等操作。
你在页面加载时通过脚本模拟按钮点击的行为不属于用户主动交互，会被浏览器直接拦截，所以无法触发全屏。

普通网页场景下无法绕过该安全限制，你可以选择以下替代方案实现近似需求：

方案1：监听用户首次交互触发全屏 #

监听页面首次用户点击事件，在用户第一次点击页面时自动触发全屏，代码示例如下：

function togglescreen(){
  var element = document.getElementById("video-container");
  // 兼容多浏览器前缀的全屏请求
  var requestMethod = element.requestFullscreen || element.webkitRequestFullscreen || element.mozRequestFullScreen || element.msRequestFullscreen;
  if (requestMethod) {
    requestMethod.call(element).catch(err => {
      console.log('全屏请求失败：', err.message);
    });
  }
}

// 页面加载完成后绑定首次点击监听
window.addEventListener('load', () => {
  // 单次监听，触发后自动移除
  document.addEventListener('click', () => togglescreen(), { once: true });
});

你也可以加一个引导遮罩提示用户点击页面进入全屏，降低用户困惑。

方案2：可控场景下放开限制 #

如果你是在Electron桌面应用、浏览器扩展、内部自定义浏览器等可控环境下使用，可以修改对应环境的安全配置，放开全屏触发的交互限制：

• Electron 可在创建窗口时的 webPreferences 配置中添加 allowFileAccessFromFileURLs: true 以及配置全屏权限；
• 浏览器扩展可在 manifest 中声明全屏相关权限。

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