原生js實現點擊按鈕切換全屏！

時間 2019-12-04

原文原文鏈接

使用fullScreen API實現全屏 web

<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>原生js實現模擬點擊按鈕切換全屏</title>
</head>

<body>

<div class="column_diagram">

    <button class="column_fell_screen" onClick="fullScreen()">全屏顯示</button>
    <button class="column_fell_screen1" onClick="fullExit()">退出全屏</button>
</div>

<script>

    function fullScreen() {
        var element = document.documentElement; //若要全屏頁面中div，var element= document.getElementById("divID");  
        //IE 10及如下ActiveXObject  
        if (window.ActiveXObject) {
            var WsShell = new ActiveXObject('WScript.Shell')
            WsShell.SendKeys('{F11}');
        }
        //HTML W3C 提議  
        else if (element.requestFullScreen) {
            element.requestFullScreen();
        }
        //IE11  
        else if (element.msRequestFullscreen) {
            element.msRequestFullscreen();
        }
        // Webkit (works in Safari5.1 and Chrome 15)  
        else if (element.webkitRequestFullScreen) {
            element.webkitRequestFullScreen();
        }
        // Firefox (works in nightly)  
        else if (element.mozRequestFullScreen) {
            element.mozRequestFullScreen();
        }
    }

    //退出全屏  
    function fullExit() {
        var element = document.documentElement; //若要全屏頁面中div，var element= document.getElementById("divID");   
        //IE ActiveXObject  
        if (window.ActiveXObject) {
            var WsShell = new ActiveXObject('WScript.Shell')
            WsShell.SendKeys('{F11}');
        }
        //HTML5 W3C 提議  
        else if (element.requestFullScreen) {
            document.exitFullscreen();
        }
        //IE 11  
        else if (element.msRequestFullscreen) {
            document.msExitFullscreen();
        }
        // Webkit (works in Safari5.1 and Chrome 15)  
        else if (element.webkitRequestFullScreen) {
            document.webkitCancelFullScreen();
        }
        // Firefox (works in nightly)  
        else if (element.mozRequestFullScreen) {
            document.mozCancelFullScreen();
        }
    }
</script>
複製代碼

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。