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

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

新老客户大回馈,云服务器低至5折

一、简介

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

二、F11全屏

  1、未完待续。。。

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:解决ionic <ion-nav> rootParams获取不到参数

下一篇:JavaScript中的this的指代对象详解