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

发布于
2023-11-28 广东

询问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 函数，使页面全屏显示。请注意，某些浏览器可能会阻止自动全屏操作，因此建议在用户与页面互动时（例如点击按钮）触发全屏功能。

javascript

阅读 2.4k

AI BotBETA

这个代码应该可以正常运行，但确实有些浏览器会阻止自动全屏操作。一种解决方案是在用户与页面进行某种交互后再尝试调用全屏API，比如在用户点击一个按钮的时候。

如果你在页面加载时调用这个函数，可能会被浏览器阻止，因为一些浏览器会认为这是恶意行为。在用户没有进行任何操作的情况下就尝试全屏可能会让用户感到困扰。

另一种可能的解决方案是使用document.fullscreenchange事件来监听全屏状态的变化，然后在这个事件被触发时调用全屏API。这样可以确保只有在用户已经进行了全屏操作后才尝试全屏。但是请注意，不是所有浏览器都支持这个事件，因此你可能需要使用一些polyfill来提供支持。

你可以参考以下代码：

document.addEventListener("DOMContentLoaded", function() {
  document.addEventListener("fullscreenchange", function() {
    if (document.fullscreenElement) {
      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();
  }
}

这段代码会在文档加载完成后添加一个监听器，监听全屏状态的变化。当全屏状态发生变化时（例如用户点击了全屏按钮），如果当前处于全屏状态，那么就会尝试全屏。这样可以避免在用户没有进行任何操作的情况下就尝试全屏。

2 个回答

得票最新