瀏覽器全屏之requestFullScreen全屏與F11全屏

一、簡介

　　瀏覽器全屏有兩種方式，一種是HTML5新增的requestFullscreen全屏，另一種是摁F11實現的全屏，本文將詳解兩種全屏的特點以及其實現。

二、requestFullscreen全屏

　　1、判斷是否支持全屏

　　通過判斷元素的requestFullscreen函數是否存在與document.fullscreenEnabled是否為True判斷瀏覽器是否支持全屏或啟用全屏，兼容寫法為

　　

   function supportfull(){
        var requestFullscreen =
            document.body.requestFullscreen ||
            document.body.webkitRequestFullscreen ||
            document.body.mozRequestFullScreen ||
            document.body.msRequestFullscreen;
        var fullscreenEnabled =
            document.fullscreenEnabled ||
            document.mozFullScreenEnabled ||
            document.webkitFullscreenEnabled ||
            document.msFullscreenEnabled;
        return !!(requestFullscreen && fullscreenEnabled);
    }

　　注意，requestFullscreen方法不存在於document對象上，並且注意字母s的大小寫

　　2、進入全屏

　　通過調用元素的requestFullscreen方法使元素進入全屏，使用時應注意：

　 （1）requestFullscreen在document對象上沒有定義。

　 （2）requestFullscreen方法只能由用戶操作觸發（如onclick事件），在onload事件中調用此方法將無效。

　 （3）當一個元素全屏時，再讓其子元素全屏是無效的，必須先退出全屏。

　 （4）返回或跳轉頁面將退出全屏。

　 （5）進入全屏的元素其父元素將不再是全屏之前的父元素，此時之前的css可能失效，:full-screen偽類可以為元素添加全屏時的樣式（使用時為了兼容請加-webkit、-moz或-ms前綴）。

　　下面給出，進入全屏的JS代碼的兼容寫法：

    function full(el) {
        if (el.requestFullscreen) {
            el.requestFullscreen();
        } else if (el.mozRequestFullScreen) {
            el.mozRequestFullScreen();
        } else if (el.webkitRequestFullscreen) {
            el.webkitRequestFullscreen();
        } else if (el.msRequestFullscreen) {
            el.msRequestFullscreen();
        }
    }

 

　　3、獲取當前進入全屏的而元素

　　　通過document.fullscreenElement方法獲取當前全屏的元素，假設id為div1的Element當前為全屏狀態則 document.querySelector("#div1")===document.fullscreenElement，以下是獲取當前全屏元素的兼容寫法：

    function fullele() {
        return(
            document.fullscreenElement ||
            document.webkitFullscreenElement ||
            document.msFullscreenElement ||
            document.mozFullScreenElement ||
            null);
    }

　　4、判斷當前是否全屏

　　通過document.fullscreenElement屬性是否為空來判斷，對於webkit內核的瀏覽器，還可以通過document.webkitIsFullScreen屬性來判斷，以下為兼容寫法：

    function isfull() {
        return !!(document.webkitIsFullScreen || fullele());
    }

 

　　5、退出全屏

　　通過document.exitFullscreen方法來退出全屏，對於不同內核的瀏覽器，方法名除了前綴不一樣外，其他地方也不一樣，以下為兼容寫法

    function exitfull() {
        if (document.exitFullscreen) {
            document.exitFullscreen();
        }
        else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        }
        else if (document.webkitExitFullscreen) {
            document.webkitExitFullscreen();
        }
        else if (document.msExitFullscreen) {
            document.msExitFullscreen();
        }
    }

6、jQuery拓展，寫成jQuery拓展，調用將十分方便，下面將給出一個實現：

$.extend({
    supportfull: function () {
        var requestFullscreen =
            document.body.requestFullscreen ||
            document.body.webkitRequestFullscreen ||
            document.body.mozRequestFullScreen ||
            document.body.msRequestFullscreen;
        var fullscreenEnabled =
            document.fullscreenEnabled ||
            document.mozFullScreenEnabled ||
            document.webkitFullscreenEnabled ||
            document.msFullscreenEnabled;
        return !!(requestFullscreen && fullscreenEnabled);
    },
    //獲取當前全屏的元素
    fullele: function () {
        return(
            document.fullscreenElement ||
            document.webkitFullscreenElement ||
            document.msFullscreenElement ||
            document.mozFullScreenElement ||
            null);
    },
    //全屏，如果當前存在已經全屏的元素，則操作無效
    full: function (el) {
        if ($.isfull()) {
            if (el === $.fullele()) {
                return;
            }
        }
        if (el.requestFullscreen) {
            el.requestFullscreen();
        } else if (el.mozRequestFullScreen) {
            el.mozRequestFullScreen();
        } else if (el.webkitRequestFullscreen) {
            el.webkitRequestFullscreen();
        } else if (el.msRequestFullscreen) {
            el.msRequestFullscreen();
        }
        return this;
    },
    //退出全屏
    exitfull: function () {
        if (document.exitFullscreen) {
            document.exitFullscreen();
        }
        else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        }
        else if (document.webkitExitFullscreen) {
            document.webkitExitFullscreen();
        }
        else if (document.msExitFullscreen) {
            document.msExitFullscreen();
        }
        return this;
    },
    //是否全屏
    isfull: function () {
        return !!(document.webkitIsFullScreen || $.fullele());
    },
    //進入或取消全屏，如果當前全屏的元素不是指定的元素，則取消全屏無效
    togglefull: function (el, callback) {
        if ($.isfull()) {
            var fullele = $.fullele();
            if (el === fullele) {
                $.exitfull();
            }
            return;
        }
        $.full(el);
        if (typeof callback == typeof $.noop) {
            callback(!$.isfull());
        }
        return this;
    }
})
$.fn.extend(
{
    // 讓匹配的第一個元素全屏
    // 該方法應有用戶操作觸發，否則無效
    full: function () {
        if ($(this).length == 0)
            return;
        $.full($(this).get(0));
        return this;
    },
    // 如果當前全屏的元素存在於匹配的元素集合中，則該元素會退出全屏
    exitfull: function () {
        if (isfull()) {
            var fullel = $.fullel();
            var index = $(this).index(fullel);
            if (index != -1) {
                $.exitfull();
            }
        }
        return this;
    },
    // 該方法應由用戶操作觸發，只對匹配的第一個元素有效
    togglefull: function (callback) {
        if ($(this).length > 0) {
            var el = $(this).first().get(0);
            $.togglefull(el, callback);
        }
        return this;
    },
    // 為元素綁定點擊事件，以使點擊的元素進入或退出全屏
    fullable: function (callback) {
        $(this).on("click", function (e) {
            $(this).togglefull(callback);
        });
        return this;
    },
});

二、F11全屏

　　1、未完待續。。。