关于JS触发全屏和退出全屏的介绍

最近项目中用到了给一个div添加一个全屏模式，所以找了下关于JS的全屏触发和解除的事件来分享一下；

前面写了一篇文章介绍js的全屏操作 
在写判断全屏的地方有遗漏，这里单独拿出来再写一篇专门判断全屏的文章。

判断浏览器是否支持requestFullscreen

首先是一段判断浏览器是否支持h5全屏api（requestFullscreen）的代码，如下：

        /**         * [isFullscreenEnabled 判断浏览器是否支持h5全屏api]         * @return [支持则返回true,不支持返回false]         */        function isFullscreenEnabled(){            return document.fullscreenEnabled       ||                   document.mozFullScreenEnabled    ||                   document.webkitFullscreenEnabled ||                   document.msFullscreenEnabled || false;        }
1
2
3
4
5
6
7
8
9
10
1
2
3
4
5
6
7
8
9
10

现在来区分一下全屏的两种情况

第一种：局部全屏，这里得把使用h5全屏api（requestFullscreen）和使用浏览器自带的全屏快捷键F11区分开来，如下图：

图1：这是未进行任何全屏下的状态 

图2：这是使用h5全屏api（requestFullscreen）后的全屏 

图3：这是使用浏览器自带的全屏快捷键F11达到的全屏 
 
效果显而易见，按F11快捷键的全屏只是把浏览器地址栏给隐藏掉了而已，而h5的全屏api将“需要全屏的dom元素”给全屏了，这个时候就无需判断F11快捷键的全屏了，只需判断h5全屏的属性（fullscreenElement）即可，代码如下：

        /**         * [isFullscreen 判断浏览器是否全屏]         * @return [全屏则返回当前调用全屏的元素,不全屏返回false]         */        function isFullscreen(){            return document.fullscreenElement    ||                   document.msFullscreenElement  ||                   document.mozFullScreenElement ||                   document.webkitFullscreenElement || false;        }
1
2
3
4
5
6
7
8
9
10
1
2
3
4
5
6
7
8
9
10

第二种：整个页面就一个canvas标签，页面没有出现滚动条的全屏（通常是在做网页游戏），在这种情况下，使用h5全屏api（requestFullscreen）和使用浏览器自带的全屏快捷键F11达到的效果是一样的，如下图。 
 
在这种情况下，全屏判断就得考虑是否是按了F11键全屏，此时，就不能使用h5的判断全屏的属性（fullscreenElement）去判断全屏了，此属性只在调用setFullscreen函数全屏时判断有效，而在使用浏览器“F11”全屏快捷键的时候无效，这个时候得根据浏览器可视区域与电脑屏幕大小做比较，来判断是否全屏，无论是setFullscreen函数还是按“F11”亲测有效。代码如下：

  function isFullscreen(){      var explorer = window.navigator.userAgent.toLowerCase();      if(explorer.indexOf('chrome')>0){//chrome         if (document.body.scrollHeight == window.screen.height && document.body.scrollWidth == window.screen.width) {              alert("全屏");          } else {              alert("不全屏");          }      }else{//IE 9+  fireFox          if (window.outerHeight == screen.height && window.outerWidth == screen.width) {              alert("全屏");          } else {                    alert("不全屏");          }      }  }

由于浏览器在全屏时屏蔽了键盘事件中的esc和F11，所以退出全屏时不会触发键盘事件，所以只能使用window.onresize来解决这个问题。

由于触发全屏也会触发window.onresize事件，所以需要添加一个定时器，当全屏以后再给window绑定onresize事件，由于绑定以后不解除绑定的话，后面的全屏还会出现一些问题，所以需要触发onresize以后把事件解绑。