Xinu

js 实现网页全屏 f11功能
<!DOCTYPE html> <html lang="en"> &...
扫描右侧二维码阅读全文
17
2018/08

js 实现网页全屏 f11功能

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

<head>
    <meta charset="UTF-8">
    <title>test全屏</title>
</head>

<body>
    <input id="Button1" type="button" value="开始全屏" onclick="kaishi()" />
    <input id="Button2" type="button" value="关闭全屏" onclick="guanbi()" />
    <script>
        function kaishi() {
            var docElm = document.documentElement;
            //W3C 
            if (docElm.requestFullscreen) {
                docElm.requestFullscreen();
            }
            //FireFox 
            else if (docElm.mozRequestFullScreen) {
                docElm.mozRequestFullScreen();
            }
            //Chrome等 
            else if (docElm.webkitRequestFullScreen) {
                docElm.webkitRequestFullScreen();
            }
            //IE11 
            else if (docElm.msRequestFullscreen) {
                docElm.msRequestFullscreen();
            }
        }

        function guanbi() {
            if (document.exitFullscreen) {
                document.exitFullscreen();
            } else if (document.mozCancelFullScreen) {
                document.mozCancelFullScreen();
            } else if (document.webkitCancelFullScreen) {
                document.webkitCancelFullScreen();
            } else if (document.msExitFullscreen) {
                document.msExitFullscreen();
            }
        }
        document.addEventListener("fullscreenchange", function() {
            fullscreenState.innerHTML = (document.fullscreen) ? "" : "not ";
        }, false);
        document.addEventListener("mozfullscreenchange", function() {
            fullscreenState.innerHTML = (document.mozFullScreen) ? "" : "not ";
        }, false);
        document.addEventListener("webkitfullscreenchange", function() {
            fullscreenState.innerHTML = (document.webkitIsFullScreen) ? "" : "not ";
        }, false);
        document.addEventListener("msfullscreenchange", function() {
            fullscreenState.innerHTML = (document.msFullscreenElement) ? "" : "not ";
        }, false);
    </script>
</body>
</html>
Last modification:August 17th, 2018 at 10:31 pm

Leave a Comment