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

2018-06-24 01:40:23来源：未知阅读 ()

一、简介

　　浏览器全屏有两种方式，一种是HTML5新增的requestFullscreen全屏，另一种是摁F11实现的全屏，本文将详解两种全屏的特点以及其实现。

二、requestFullscreen全屏

　　1、判断是否支持全屏

　　通过判断元素的requestFullscreen函数是否存在与document.fullscreenEnabled是否为True判断浏览器是否支持全屏或启用全屏，兼容写法为

 1    function supportfull(){
 2         var requestFullscreen =
 3             document.body.requestFullscreen ||
 4             document.body.webkitRequestFullscreen ||
 5             document.body.mozRequestFullScreen ||
 6             document.body.msRequestFullscreen;
 7         var fullscreenEnabled =
 8             document.fullscreenEnabled ||
 9             document.mozFullScreenEnabled ||
10             document.webkitFullscreenEnabled ||
11             document.msFullscreenEnabled;
12         return !!(requestFullscreen && fullscreenEnabled);
13     }

　　注意，requestFullscreen方法不存在于document对象上，并且注意字母s的大小写

　　2、进入全屏

　　通过调用元素的requestFullscreen方法使元素进入全屏，使用时应注意：

　（1）requestFullscreen在document对象上没有定义。

　（2）requestFullscreen方法只能由用户操作触发（如onclick事件），在onload事件中调用此方法将无效。

　（3）当一个元素全屏时，再让其子元素全屏是无效的，必须先退出全屏。

　（4）返回或跳转页面将退出全屏。

　（5）进入全屏的元素其父元素将不再是全屏之前的父元素，此时之前的css可能失效，:full-screen伪类可以为元素添加全屏时的样式（使用时为了兼容请加-webkit、-moz或-ms前缀）。

　　下面给出，进入全屏的JS代码的兼容写法：

 1     function full(el) {
 2         if (el.requestFullscreen) {
 3             el.requestFullscreen();
 4         } else if (el.mozRequestFullScreen) {
 5             el.mozRequestFullScreen();
 6         } else if (el.webkitRequestFullscreen) {
 7             el.webkitRequestFullscreen();
 8         } else if (el.msRequestFullscreen) {
 9             el.msRequestFullscreen();
10         }
11     }

　　3、获取当前进入全屏的而元素

　　　通过document.fullscreenElement方法获取当前全屏的元素，假设id为div1的Element当前为全屏状态则 document.querySelector("#div1")===document.fullscreenElement，以下是获取当前全屏元素的兼容写法：

1     function fullele() {
2         return(
3             document.fullscreenElement ||
4             document.webkitFullscreenElement ||
5             document.msFullscreenElement ||
6             document.mozFullScreenElement ||
7             null);
8     }

　　4、判断当前是否全屏

　　通过document.fullscreenElement属性是否为空来判断，对于webkit内核的浏览器，还可以通过document.webkitIsFullScreen属性来判断，以下为兼容写法：

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

　　5、退出全屏

　　通过document.exitFullscreen方法来退出全屏，对于不同内核的浏览器，方法名除了前缀不一样外，其他地方也不一样，以下为兼容写法

 1     function exitfull() {
 2         if (document.exitFullscreen) {
 3             document.exitFullscreen();
 4         }
 5         else if (document.mozCancelFullScreen) {
 6             document.mozCancelFullScreen();
 7         }
 8         else if (document.webkitExitFullscreen) {
 9             document.webkitExitFullscreen();
10         }
11         else if (document.msExitFullscreen) {
12             document.msExitFullscreen();
13         }
14     }

6、jQuery拓展，写成jQuery拓展，调用将十分方便，下面将给出一个实现：

  1 $.extend({
  2     supportfull: function () {
  3         var requestFullscreen =
  4             document.body.requestFullscreen ||
  5             document.body.webkitRequestFullscreen ||
  6             document.body.mozRequestFullScreen ||
  7             document.body.msRequestFullscreen;
  8         var fullscreenEnabled =
  9             document.fullscreenEnabled ||
 10             document.mozFullScreenEnabled ||
 11             document.webkitFullscreenEnabled ||
 12             document.msFullscreenEnabled;
 13         return !!(requestFullscreen && fullscreenEnabled);
 14     },
 15     //获取当前全屏的元素
 16     fullele: function () {
 17         return(
 18             document.fullscreenElement ||
 19             document.webkitFullscreenElement ||
 20             document.msFullscreenElement ||
 21             document.mozFullScreenElement ||
 22             null);
 23     },
 24     //全屏，如果当前存在已经全屏的元素，则操作无效
 25     full: function (el) {
 26         if ($.isfull()) {
 27             if (el === $.fullele()) {
 28                 return;
 29             }
 30         }
 31         if (el.requestFullscreen) {
 32             el.requestFullscreen();
 33         } else if (el.mozRequestFullScreen) {
 34             el.mozRequestFullScreen();
 35         } else if (el.webkitRequestFullscreen) {
 36             el.webkitRequestFullscreen();
 37         } else if (el.msRequestFullscreen) {
 38             el.msRequestFullscreen();
 39         }
 40         return this;
 41     },
 42     //退出全屏
 43     exitfull: function () {
 44         if (document.exitFullscreen) {
 45             document.exitFullscreen();
 46         }
 47         else if (document.mozCancelFullScreen) {
 48             document.mozCancelFullScreen();
 49         }
 50         else if (document.webkitExitFullscreen) {
 51             document.webkitExitFullscreen();
 52         }
 53         else if (document.msExitFullscreen) {
 54             document.msExitFullscreen();
 55         }
 56         return this;
 57     },
 58     //是否全屏
 59     isfull: function () {
 60         return !!(document.webkitIsFullScreen || $.fullele());
 61     },
 62     //进入或取消全屏，如果当前全屏的元素不是指定的元素，则取消全屏无效
 63     togglefull: function (el, callback) {
 64         if ($.isfull()) {
 65             var fullele = $.fullele();
 66             if (el === fullele) {
 67                 $.exitfull();
 68             }
 69             return;
 70         }
 71         $.full(el);
 72         if (typeof callback == typeof $.noop) {
 73             callback(!$.isfull());
 74         }
 75         return this;
 76     }
 77 })
 78 $.fn.extend(
 79 {
 80     // 让匹配的第一个元素全屏
 81     // 该方法应有用户操作触发，否则无效
 82     full: function () {
 83         if ($(this).length == 0)
 84             return;
 85         $.full($(this).get(0));
 86         return this;
 87     },
 88     // 如果当前全屏的元素存在于匹配的元素集合中，则该元素会退出全屏
 89     exitfull: function () {
 90         if (isfull()) {
 91             var fullel = $.fullel();
 92             var index = $(this).index(fullel);
 93             if (index != -1) {
 94                 $.exitfull();
 95             }
 96         }
 97         return this;
 98     },
 99     // 该方法应由用户操作触发，只对匹配的第一个元素有效
100     togglefull: function (callback) {
101         if ($(this).length > 0) {
102             var el = $(this).first().get(0);
103             $.togglefull(el, callback);
104         }
105         return this;
106     },
107     // 为元素绑定点击事件，以使点击的元素进入或退出全屏
108     fullable: function (callback) {
109         $(this).on("click", function (e) {
110             $(this).togglefull(callback);
111         });
112         return this;
113     },
114 });