js 設定、退出和判斷全屏的方法

1. 設定全屏
2. 退出全屏
3. 全屏屬性
4. 全屏事件
5. 全屏狀態的CSS

設定全屏

        /**
         * [setFullscreen 設定全屏]
         * @param {domElement} element [DOM節點物件(可選)]
         */
        function setFullscreen(element) {
            var el = element instanceof HTMLElement ? element : document.documentElement;
            var
 
 rfs = el.requestFullscreen       || 
                      el.webkitRequestFullscreen || 
                      el.mozRequestFullScreen    || 
                      el.msRequestFullscreen;
            if (rfs) {
                rfs.call(el);
            } else if (window.ActiveXObject) {
                var
 
 ws = new ActiveXObject("WScript.Shell");
                ws && ws.SendKeys("{F11}");
            }
        }

退出全屏

        /**
         * [exitFullscreen 退出全屏]
         */
        function exitFullscreen(){
            var efs = document.exitFullscreen       || 
                      document.webkitExitFullscreen || 
                      document.mozCancelFullScreen  || 
                      document.msExitFullscreen;
            if
 
 (efs) {
                efs.call(document);
            } else if (window.ActiveXObject) {
                var ws = new ActiveXObject("WScript.Shell");
                ws && ws.SendKeys("{F11}");
            }
        }

屬性

fullscreenElement

        var fullscreenElement = document.fullscreenElement    ||
                                document.mozFullScreenElement ||
                                document.webkitFullscreenElement;

fullscreenElement屬性返回正處於全屏狀態的Element節點，如果當前沒有節點處於全屏狀態，則返回null。

fullscreenEnabled

        var fullscreenEnabled = document.fullscreenEnabled       ||
                                document.mozFullScreenEnabled    ||
                                document.webkitFullscreenEnabled ||
                                document.msFullscreenEnabled;

        if (fullscreenEnabled) {
            setFullscreen();
        } else {
            console.log('瀏覽器當前不能全屏');
        }

fullscreenEnabled屬性返回一個布林值，表示當前文件是否可以切換到全屏狀態。

判斷全屏

fullscreenchange

        document.addEventListener('fullscreenchange', function(){});

        document.addEventListener('webkitfullscreenchange', function(){});

        document.addEventListener('mozfullscreenchange', function(){});

        document.addEventListener('MSFullscreenChange', function(){});

fullscreenchange事件：瀏覽器進入或離開全屏時觸發。

fullscreenerror

        document.addEventListener('fullscreenerror', function(){});

        document.addEventListener('webkitfullscreenerror', function(){});

        document.addEventListener('mozfullscreenerror', function(){});

        document.addEventListener('MSFullscreenError', function(){});

fullscreenerror事件：瀏覽器無法進入全屏時觸發，可能是技術原因，也可能是使用者拒絕。
更詳細的全屏判斷請點選這裡

全屏狀態下的CSS

        :-webkit-full-screen {
          /* properties */
        }

        :-moz-full-screen {
          /* properties */
        }

        :-ms-fullscreen {
          /* properties */
        }

        :full-screen { /*pre-spec */
          /* properties */
        }

        :fullscreen { /* spec */
          /* properties */
        }

        /* deeper elements */
        video:-webkit-full-screen {
            width: 100%;
            height: 100%;
        }

全屏狀態下，大多數瀏覽器的CSS支援:full-screen偽類，只有IE11支援:fullscreen偽類。使用這個偽類，可以對全屏狀態設定單獨的CSS屬性。

目錄

瀏覽器相容

1. IE11+
2. Chrome
3. FireFox

參考連結