如何使网页立即进入全屏[重复]答案

【问题标题】：how to make a webpage instantly enter full screen [duplicate]如何使网页立即进入全屏[重复]
【发布时间】：2021-06-30 20:53:10
【问题描述】：

我正在尝试弄清楚如何使网页在打开的第二秒立即进入全屏状态。
我有这个：

var elem = document.documentElement;
function openFullscreen() {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.webkitRequestFullscreen) { /* Safari */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE11 */
    elem.msRequestFullscreen();
  }
}

:-webkit-full-screen {
  background-color: white;
}

:-ms-fullscreen {
  background-color: white;
}

:fullscreen {
  background-color: white;
}

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">

<button>Random button</button>

</head>
<body>

</body>
</html>

而且我希望在打开页面的第二个调用 openFullscreen()。有什么办法吗？

【问题讨论】：

不，因为那会非常烦人。所以浏览器供应商阻止了这种行为。用户输入是强制性的。
哇哇喇叭声

标签： javascript html fullscreen

【解决方案1】：

您的问题是您从未调用过这些函数。查看我的代码：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* Safari syntax */
:-webkit-full-screen {
  background-color: yellow;
}

/* IE11 */
:-ms-fullscreen {
  background-color: yellow;
}

/* Standard syntax */
:fullscreen {
  background-color: yellow;
}

/* Style the button */
button {
  padding: 20px;
  font-size: 20px;
}
</style>
</head>
<body>

<h2>Fullscreen with JavaScript</h2>
<p>Click on the "Open Fullscreen" button to open this page in fullscreen mode. Close it by either clicking the "Esc" key on your keyboard, or with the "Close Fullscreen" button.</p>

<button onclick="openFullscreen();">Open Fullscreen</button>
<button onclick="closeFullscreen();">Close Fullscreen</button>

<script>
var elem = document.documentElement;
function openFullscreen() {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.webkitRequestFullscreen) { /* Safari */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE11 */
    elem.msRequestFullscreen();
  }
}

function closeFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.webkitExitFullscreen) { /* Safari */
    document.webkitExitFullscreen();
  } else if (document.msExitFullscreen) { /* IE11 */
    document.msExitFullscreen();
  }
}
</script>

<p>Note: Internet Explorer 10 and earlier versions do not support the msRequestFullscreen() method.</p>

</body>
</html>

来源：https://www.w3schools.com/howto/howto_js_fullscreen.asp#:~:text=Try%20it%20Yourself%20%C2%BB-,Fullscreen%20Document,-To%20open%20the

【讨论】：

【解决方案2】：

很遗憾，这是不可能的。诸如 mousemove 之类的事件在允许时可能会令人讨厌，但它们不会运行。你可以试试这个代码。

        document.querySelector('html').addEventListener('click', openFullscreen)
        var elem = document.querySelector('.ex');
        function openFullscreen() {
            if (elem.requestFullscreen) {
                elem.requestFullscreen();
            } else if (elem.webkitRequestFullscreen) { /* Safari */
                elem.webkitRequestFullscreen();
            } else if (elem.msRequestFullscreen) { /* IE11 */
                elem.msRequestFullscreen();
            }
        }

   :-webkit-full-screen {
            background-color: white;
        }

        :-ms-fullscreen {
            background-color: white;
        }

        :fullscreen {
            background-color: white;
        }

    <div class="ex">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia repellat culpa ipsam tenetur
        inventore quaerat cupiditate quo, voluptate tempora eligendi ratione animi consequatur earum eaque facilis quis
        optio mollitia saepe?</div>

【讨论】：