如何用JS实现页面加载时全屏显示？-js教程-PHP中文网

如何用JS实现页面加载时全屏显示？

聖光之護

发布： 2025-02-20 10:24:27

原创

630人浏览过

如何用js实现页面加载时全屏显示？

JavaScript实现页面加载全屏显示

本文介绍如何使用JavaScript让网页在加载时自动全屏显示。我们将利用Fullscreen API，但需注意某些浏览器（例如Chrome）可能阻止JavaScript自动触发全屏。

HTML结构 (index.html):

<code class="html"><!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>自动全屏示例</title>
  <h1>自动全屏示例</h1>
  <script src="script.js"></script> </head>
<body>
  <!-- 页面内容 -->
</body>
</html></code>

登录后复制

JavaScript代码 (script.js):

<code class="javascript">document.addEventListener("DOMContentLoaded", function() {
  requestFullscreen();
});

function requestFullscreen() {
  const elem = document.documentElement;
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.webkitRequestFullscreen) {
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) {
    elem.msRequestFullscreen();
  } else if (elem.mozRequestFullScreen) {
    elem.mozRequestFullScreen();
  }
}</code>

登录后复制

解决Chrome浏览器限制的方法：

由于Chrome浏览器安全策略的限制，直接使用JavaScript在页面加载时触发全屏可能无效。为了绕过此限制，建议采用以下两种方法之一：