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

javascript

小MIS 2023-11-28 08:52:01 ‧ 1591 瀏覽

分享至

詢問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 函數，使頁面全屏顯示。請注意，某些瀏覽器可能會阻止自動全屏操作，因此建議在用戶與頁面互動時（例如點擊按鈕）觸發全屏功能。

hokou iT邦好手 1 級 ‧ 2023-11-28 09:31:16 檢舉

你不照著建議用個按鈕之類的手動觸發嗎？
有可能是強制觸發，造成瀏覽器擋掉

窮嘶發發發 iT邦高手 1 級 ‧ 2023-11-28 09:56:31 檢舉

JS 砍掉這一行代碼
document.addEventListener("DOMContentLoaded", function() {
openFullscreen();
});
HTML BODY 內加入這行，
<a href="#" onClick="openFullscreen()">Full Screen Mode</a>
requestFullscreen 在2012年就被W3C 警告，因此該年所有的瀏覽器都取消了這個事件直接調用，
必須在USER行為確認之後才能用，最簡單的方法就是用A LINK這種，或是開一個按鍵事件也行