526互联

浏览器全屏之requestFullScreen全屏与F11全屏

发布时间 2023-07-06 16:05:57作者: 且行且思

一、简介

　　浏览器全屏有两种方式，一种是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;
     },
 });