JavaScript点击进入全屏和退出全屏

向右看齐 2021-09-22 01:01 504阅读 0赞

### 目录 ###

*  效果图
 *  核心代码
 *  完整案例

# 效果图 #

![点击进入全屏][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk1MzIyNw_size_16_color_FFFFFF_t_70]

# 核心代码 #

// 检测当前是否全屏
    function isFullScreen() { 
        var isFull = !!(document.webkitIsFullScreen || document.mozFullScreen || document.msFullscreenElement || document.fullscreenElement);
        return isFull;
    };
    
    // 退出全屏 
    function exitFullscreen() { 
        if (document.exitFullscreen) { 
            document.exitFullscreen();
        } else if (document.msExitFullscreen) { 
            document.msExitFullscreen();
        } else if (document.mozCancelFullScreen) { 
            document.mozCancelFullScreen();
        } else if (document.webkitExitFullscreen) { 
            document.webkitExitFullscreen();
        }
    };
    
    // 进入全屏
    function handleFullScreen(element) { 
        console.log(element, "element");
    
        if (element.requestFullscreen) { 
            console.log(1);
            element.requestFullscreen();
        } else if (element.mozRequestFullScreen) { 
            console.log(2);
            element.mozRequestFullScreen();
        } else if (element.webkitRequestFullscreen) { 
            console.log(3);
            element.webkitRequestFullscreen();
        } else if (element.msRequestFullscreen) { 
            console.log(4);
            element.msRequestFullscreen();
        }
    };

# 完整案例 #

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>点击全屏</title>
    </head>
    <style> .fullBox { width: 600px; height: 400px; padding: 100px; text-align: center; margin: 30px auto; background-color: pink; box-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09); } .btn { font-size: 20px; } </style>
    
    <body>
        <div id="box" class="fullBox">
            Hello World 点击我试试
            <button id="btn" class="btn" onclick="handleClick(event)">进入全屏</button>
        </div>
    
        <script> // 监听窗口大小 window.onresize = function () { var isFull = isFullScreen(); const btn = document.getElementById("btn"); if (isFull === false) { btn.innerHTML = "进入全屏"; } else { btn.innerHTML = "退出全屏"; } }; const handleClick = (e) => { const el = e.target; // 检测当前是否是全屏状态 var isFull = isFullScreen(); if (isFull) { el.innerHTML = "进入全屏"; exitFullscreen(); } else { el.innerHTML = "退出全屏"; const box = document.getElementById("box"); handleFullScreen(box); } }; // 检测当前是否全屏 function isFullScreen() { var isFull = !!(document.webkitIsFullScreen || document.mozFullScreen || document.msFullscreenElement || document.fullscreenElement); return isFull; }; // 退出全屏 function exitFullscreen() { if (document.exitFullscreen) { document.exitFullscreen(); } else if (document.msExitFullscreen) { document.msExitFullscreen(); } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if (document.webkitExitFullscreen) { document.webkitExitFullscreen(); } }; // 进入全屏 function handleFullScreen(element) { console.log(element, "element"); if (element.requestFullscreen) { console.log(1); element.requestFullscreen(); } else if (element.mozRequestFullScreen) { console.log(2); element.mozRequestFullScreen(); } else if (element.webkitRequestFullscreen) { console.log(3); element.webkitRequestFullscreen(); } else if (element.msRequestFullscreen) { console.log(4); element.msRequestFullscreen(); } }; </script>
    </body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk1MzIyNw_size_16_color_FFFFFF_t_70]: /images/20210920/b69fd7f98a124c339f09e0175815ba9f.png