HTML5 全屏化操做功能

時間 2019-12-20

標籤 html5 html 全屏做功欄目 HTML5 简体版

原文原文鏈接

因爲項目中用到了全屏化挫折功能，查看了API後寫了一個簡單的全屏化modelcss

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
        <title></title>
        <style type="text/css">
            .div1{
                width: 1000px;height: 500px;
                border: solid 1px blue;
            }
            .test{        
                width:100%;        
                background: black;
                height:100%;
                min-height: 400px;
                border: solid 1px red;                
            }
            div{
                color: #fff;
            }
        </style>
        
    </head>
    <body>
        <div class="div1" >
            <div id="div2"  class="test">
                <div id="div" class="" style="border:solid 1px #ffffff;width:100px;height:40px;">全屏</div>
                <div id="div3" class="" style="border:solid 1px #ffffff;width:100px;height:40px;">取消全屏</div>
            </div>
        </div>
        
        
        <script>
            (function () {
                var viewFullScreen = document.getElementById("div");    
                if (viewFullScreen) {
                    viewFullScreen.addEventListener("click", function () {
                        var docElm = document.getElementById("div2");
                        if (docElm.requestFullscreen) {
                            docElm.requestFullscreen();
                        }
                        else if (docElm.msRequestFullscreen) {
                            docElm.msRequestFullscreen();
                        }
                        else if (docElm.mozRequestFullScreen) {
                            docElm.mozRequestFullScreen();
                        }
                        else if (docElm.webkitRequestFullScreen) {
                            docElm.webkitRequestFullScreen();
                        }else{
                            alert("當前瀏覽器不支持全屏化操做！");
                        }
                    }, false);
                }
            
                var cancelFullScreen = document.getElementById("div3");
                if (cancelFullScreen) {
                    cancelFullScreen.addEventListener("click", function () {
                        if (document.exitFullscreen) {
                            document.exitFullscreen();
                        }
                        else if (document.msExitFullscreen) {
                            document.msExitFullscreen();
                        }
                        else if (document.mozCancelFullScreen) {
                            document.mozCancelFullScreen();
                        }
                        else if (document.webkitCancelFullScreen) {
                            document.webkitCancelFullScreen();
                        } else{
                            alert("當前瀏覽器不支持全屏化操做！");
                        }
                    }, false);
                }                        
            })();
        </script>
    </body>
</html>

若是你想兼容一些低版本的ie瀏覽器，你能夠替換我作提示的區域html

alert("當前瀏覽器不支持全屏化操做！");讓你想全屏的部分，width:100%;height:100%;而後再讓他的父類節點的高度和寬度等於當前可用瀏覽器的最大寬度和高度就行啦。在這裏沒有作具體的實現。本人，不是很建議去兼容低ie瀏覽器，由於作前端的都知道，如今大部分html5和css3,ES6都不在積極的淘汰低版本瀏覽器。微軟也放棄了對低版本ie瀏覽器的維護。

相關標籤/搜索

每日一句

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