如何JS在載入界面全屏顯示?

作者站长头像
站长
· 阅读数 6

询问AI得到以下code，但是在页面载入时调用会出现权限不足被block问题

要实现在进入页面时自动全屏显示，您可以在 JavaScript 中使用 Fullscreen API。以下是一个简单的示例：

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Auto Fullscreen</title>
</head>
<body>
  <h1>自动全屏示例</h1>
  <script src="script.js"></script>
</body>
</html>

JavaScript (script.js):

document.addEventListener("DOMContentLoaded", function() {
  openFullscreen();
});

function openFullscreen() {
  const elem = document.documentElement;

  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.mozRequestFullScreen) { // Firefox
    elem.mozRequestFullScreen();
  } else if (elem.webkitRequestFullscreen) { // Chrome, Safari and Opera
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { // IE/Edge
    elem.msRequestFullscreen();
  }
}

这段代码会在文档加载完成后触发 openFullscreen 函数，使页面全屏显示。请注意，某些浏览器可能会阻止自动全屏操作，因此建议在用户与页面互动时（例如点击按钮）触发全屏功能。

回复
1个回答
avatar
test
2024-06-24

浏览器不支持载入时通过js触发全屏。可以用下面方法处理：1.新增导航页，点击菜单时用js触发全屏，满足浏览器要求通过手势触发的要求。2.创建浏览器快捷方式(chrome)，增加--start-fullscreen参数配置，启动时自动全屏。

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引，对解决问题有帮助
  • 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容