如何让网页立即进入全屏
如何让网页立即进入全屏
提问于 2021-07-01 04: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()。有没有办法做到这一点？
回答 2
Stack Overflow用户
发布于 2021-07-01 05:07:04
您的问题是您从未调用过这些函数。请看我的代码：
<!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>Stack Overflow用户
发布于 2021-07-01 05:05:27
不幸的是，这是不可能的。像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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68201494
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号