JS 全屏

全屏功能实现

最新推荐文章于 2024-05-20 17:33:31 发布

原创最新推荐文章于 2024-05-20 17:33:31 发布 · 133 阅读

0 ·

CC 4.0 BY-SA版权

JS 专栏收录该内容

5 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>全屏</title>
</head>

<body>
    <button class="quanping" onclick="launchFullScreen()">全屏</button>
    <button class="quit" onclick="cancelFullScreen()">退出全屏</button>
    <script>
        function launchFullScreen() {
            var element = document.body
            if (element.requestFullscreen) {
                element.requestFullscreen();
            } else if (element.msRequestFullscreen) {
                element.msRequestFullscreen();
            } else if (element.mozRequestFullScreen) {
                element.mozRequestFullScreen();
            } else if (element.webkitRequestFullscreen) {
                element.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
            }
        }

        function cancelFullScreen() {

            if (document.exitFullscreen) {
                document.exitFullscreen();
            } else if (document.msExitFullscreen) {
                document.msExitFullscreen();
            } else if (document.mozCancelFullScreen) {
                document.mozCancelFullScreen();
            } else if (document.webkitExitFullscreen) {
                document.webkitExitFullscreen();
            }
        }  
    </script>
</body>

</html>