浏览器全屏之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、未完待续。。。