H5 DOM 全屏 api requestFullscreen

分手后的思念是犯贱 2022-05-29 04:08 267阅读 0赞

文章转载自：[http://javascript.ruanyifeng.com/htmlapi/fullscreen.html\#toc7][http_javascript.ruanyifeng.com_htmlapi_fullscreen.html_toc7]

## js 设置、退出和判断全屏的方法 ##

1.  设置全屏
2.  退出全屏
3.  全屏属性
4.  全屏事件
5.  全屏状态的CSS

--------------------

### 设置全屏 ###

/*** [requestFullScreen 设置全屏]*/
    function requestFullScreen() { var de = document.documentElement; if (de.requestFullscreen) { de.requestFullscreen(); } else if (de.mozRequestFullScreen) { de.mozRequestFullScreen(); } else if (de.webkitRequestFullScreen) { de.webkitRequestFullScreen(); }}

### 退出全屏 ###

/*** [exitFullscreen 退出全屏]*/function exitFullscreen() { var de = document; if (de.exitFullscreen) { de.exitFullscreen(); } else if (de.mozCancelFullScreen) { de.mozCancelFullScreen(); } else if (de.webkitCancelFullScreen) { de.webkitCancelFullScreen(); }}

### 属性 ###

#### fullscreenElement ####

var fullscreenElement = document.fullscreenElement    ||
                                    document.mozFullScreenElement ||
                                    document.webkitFullscreenElement;

fullscreenElement属性返回正处于全屏状态的Element节点，如果当前没有节点处于全屏状态，则返回null。

#### fullscreenEnabled ####

var fullscreenEnabled = document.fullscreenEnabled       ||
                                    document.mozFullScreenEnabled    ||
                                    document.webkitFullscreenEnabled ||
                                    document.msFullscreenEnabled;
    
            if (fullscreenEnabled) {
                setFullscreen();
            } else {
                console.log('浏览器当前不能全屏');
            }

fullscreenEnabled属性返回一个布尔值，表示当前文档是否可以切换到全屏状态。

### 判断全屏 ###

#### fullscreenchange ####

fullscreenchange事件：浏览器进入或离开全屏时触发。

#### fullscreenerror ####

fullscreenerror事件：浏览器无法进入全屏时触发，可能是技术原因，也可能是用户拒绝。   
更详细的全屏判断请点击[这里][Link 1]

### 全屏状态下的CSS ###

:-webkit-full-screen { /* properties */ }
    
            :-moz-full-screen { /* properties */ }
    
            :-ms-fullscreen { /* properties */ }
    
            :full-screen { /*pre-spec */ /* properties */ }
    
            :fullscreen { /* spec */ /* properties */ }
    
            /* deeper elements */
            video:-webkit-full-screen { width: 100%; height: 100%; }

全屏状态下，大多数浏览器的CSS支持:full-screen伪类，只有IE11支持:fullscreen伪类。使用这个伪类，可以对全屏状态设置单独的CSS属性。

## 目录 ##

*   *  [js 设置退出和判断全屏的方法][js]
        
         *  [设置全屏][Link 2]
         *  [退出全屏][Link 3]
         *  [属性][Link 4]
            
             *  [fullscreenElement][]
             *  [fullscreenEnabled][]
         *  [判断全屏][Link 5]
            
             *  [fullscreenchange][]
             *  [fullscreenerror][]
         *  [全屏状态下的CSS][CSS]
     *  [目录][Link 6]
     *  [浏览器兼容][Link 7]
     *  [参考链接][Link 8]

## 浏览器兼容 ##

1.  IE11+
2.  Chrome
3.  FireFox

## 参考链接 ##

> [http://javascript.ruanyifeng.com/htmlapi/fullscreen.html\#toc7][http_javascript.ruanyifeng.com_htmlapi_fullscreen.html_toc7]

--------------------

##  ##

### 判断浏览器是否支持requestFullscreen ###

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

/** * [isFullscreenEnabled 判断全屏模式是否是可用] * @return [支持则返回true,不支持返回false] */
            function isFullscreenEnabled(){
                return document.fullscreenEnabled       ||
                       document.mozFullScreenEnabled    ||
                       document.webkitFullscreenEnabled ||
                       document.msFullscreenEnabled || false;
            }

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

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

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

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

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

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

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

### 总结 ###

<table style="border-collapse:collapse; margin-bottom:24px; font-size:16px; border-spacing:0px; border:1px solid rgb(238,238,238); color:rgb(63,63,63); font-family:'microsoft yahei'"> 
 <thead> 
  <tr style="border-width:1px 0px 0px; border-top-style:solid; border-top-color:rgb(221,221,221)"> 
   <th style="border:1px solid rgb(238,238,238); font-size:14px; color:rgb(79,79,79); line-height:20px; padding:8px; text-align:left; background-color:rgb(239,243,245); vertical-align:top"> isFullscreen方法</th> 
   <th align="center" style="border:1px solid rgb(238,238,238); font-size:14px; color:rgb(79,79,79); line-height:20px; padding:8px; text-align:left; background-color:rgb(239,243,245); vertical-align:top"> 有滚动条的页面</th> 
   <th align="center" style="border:1px solid rgb(238,238,238); font-size:14px; color:rgb(79,79,79); line-height:20px; padding:8px; text-align:left; background-color:rgb(239,243,245); vertical-align:top"> 无滚动条的页面</th> 
  </tr> 
 </thead> 
 <tbody style="border:0px"> 
  <tr style="border-width:1px 0px 0px; border-top-style:solid; border-top-color:rgb(221,221,221)"> 
   <td style="border:1px solid rgb(238,238,238); font-size:14px; color:rgb(79,79,79); line-height:20px; padding:8px; vertical-align:top"> Fullscreen api启动的全屏</td> 
   <td align="center" style="border:1px solid rgb(238,238,238); font-size:14px; color:rgb(79,79,79); line-height:20px; padding:8px; vertical-align:top"> √</td> 
   <td align="center" style="border:1px solid rgb(238,238,238); font-size:14px; color:rgb(79,79,79); line-height:20px; padding:8px; vertical-align:top"> √</td> 
  </tr> 
  <tr style="border-width:1px 0px 0px; border-top-style:solid; border-top-color:rgb(221,221,221); background-color:rgb(247,247,247)"> 
   <td style="border:1px solid rgb(238,238,238); font-size:14px; color:rgb(79,79,79); line-height:20px; padding:8px; vertical-align:top"> 按f11启动的全屏</td> 
   <td align="center" style="border:1px solid rgb(238,238,238); font-size:14px; color:rgb(79,79,79); line-height:20px; padding:8px; vertical-align:top"> ×</td> 
   <td align="center" style="border:1px solid rgb(238,238,238); font-size:14px; color:rgb(79,79,79); line-height:20px; padding:8px; vertical-align:top"> ×</td> 
  </tr> 
 </tbody> 
</table>

--------------------

<table style="border-collapse:collapse; margin-bottom:24px; font-size:16px; border-spacing:0px; border:1px solid rgb(238,238,238); color:rgb(63,63,63); font-family:'microsoft yahei'"> 
 <thead> 
  <tr style="border-width:1px 0px 0px; border-top-style:solid; border-top-color:rgb(221,221,221)"> 
   <th style="border:1px solid rgb(238,238,238); font-size:14px; color:rgb(79,79,79); line-height:20px; padding:8px; text-align:left; background-color:rgb(239,243,245); vertical-align:top"> isFullscreenForNoScroll方法</th> 
   <th align="center" style="border:1px solid rgb(238,238,238); font-size:14px; color:rgb(79,79,79); line-height:20px; padding:8px; text-align:left; background-color:rgb(239,243,245); vertical-align:top"> 有滚动条的页面</th> 
   <th align="center" style="border:1px solid rgb(238,238,238); font-size:14px; color:rgb(79,79,79); line-height:20px; padding:8px; text-align:left; background-color:rgb(239,243,245); vertical-align:top"> 无滚动条的页面</th> 
  </tr> 
 </thead> 
 <tbody style="border:0px"> 
  <tr style="border-width:1px 0px 0px; border-top-style:solid; border-top-color:rgb(221,221,221)"> 
   <td style="border:1px solid rgb(238,238,238); font-size:14px; color:rgb(79,79,79); line-height:20px; padding:8px; vertical-align:top"> Fullscreen api启动的全屏</td> 
   <td align="center" style="border:1px solid rgb(238,238,238); font-size:14px; color:rgb(79,79,79); line-height:20px; padding:8px; vertical-align:top"> ×</td> 
   <td align="center" style="border:1px solid rgb(238,238,238); font-size:14px; color:rgb(79,79,79); line-height:20px; padding:8px; vertical-align:top"> √</td> 
  </tr> 
  <tr style="border-width:1px 0px 0px; border-top-style:solid; border-top-color:rgb(221,221,221); background-color:rgb(247,247,247)"> 
   <td style="border:1px solid rgb(238,238,238); font-size:14px; color:rgb(79,79,79); line-height:20px; padding:8px; vertical-align:top"> 按f11启动的全屏</td> 
   <td align="center" style="border:1px solid rgb(238,238,238); font-size:14px; color:rgb(79,79,79); line-height:20px; padding:8px; vertical-align:top"> ×</td> 
   <td align="center" style="border:1px solid rgb(238,238,238); font-size:14px; color:rgb(79,79,79); line-height:20px; padding:8px; vertical-align:top"> √</td> 
  </tr> 
 </tbody> 
</table>

√：方法有效；   
×：方法无效；

#### TODO ####

目前还无法判断有滚动条按f11的全屏状态。

[http_javascript.ruanyifeng.com_htmlapi_fullscreen.html_toc7]: http://javascript.ruanyifeng.com/htmlapi/fullscreen.html#toc7
[Link 1]: http://blog.csdn.net/k358971707/article/details/60465689
[js]: http://blog.csdn.net/k358971707/article/details/53090478#js-%E8%AE%BE%E7%BD%AE%E9%80%80%E5%87%BA%E5%92%8C%E5%88%A4%E6%96%AD%E5%85%A8%E5%B1%8F%E7%9A%84%E6%96%B9%E6%B3%95
[Link 2]: http://blog.csdn.net/k358971707/article/details/53090478#%E8%AE%BE%E7%BD%AE%E5%85%A8%E5%B1%8F
[Link 3]: http://blog.csdn.net/k358971707/article/details/53090478#%E9%80%80%E5%87%BA%E5%85%A8%E5%B1%8F
[Link 4]: http://blog.csdn.net/k358971707/article/details/53090478#%E5%B1%9E%E6%80%A7
[fullscreenElement]: http://blog.csdn.net/k358971707/article/details/53090478#fullscreenelement
[fullscreenEnabled]: http://blog.csdn.net/k358971707/article/details/53090478#fullscreenenabled
[Link 5]: http://blog.csdn.net/k358971707/article/details/53090478#%E5%88%A4%E6%96%AD%E5%85%A8%E5%B1%8F
[fullscreenchange]: http://blog.csdn.net/k358971707/article/details/53090478#fullscreenchange
[fullscreenerror]: http://blog.csdn.net/k358971707/article/details/53090478#fullscreenerror
[CSS]: http://blog.csdn.net/k358971707/article/details/53090478#%E5%85%A8%E5%B1%8F%E7%8A%B6%E6%80%81%E4%B8%8B%E7%9A%84css
[Link 6]: http://blog.csdn.net/k358971707/article/details/53090478#%E7%9B%AE%E5%BD%95
[Link 7]: http://blog.csdn.net/k358971707/article/details/53090478#%E6%B5%8F%E8%A7%88%E5%99%A8%E5%85%BC%E5%AE%B9
[Link 8]: http://blog.csdn.net/k358971707/article/details/53090478#%E5%8F%82%E8%80%83%E9%93%BE%E6%8E%A5
[SouthEast]: /images/20220529/9e292ab1f17f440b9922f81ab6db1b60.png
[h5_api_requestFullscreen]: /images/20220529/dfd102cb60ac42f4a9744c0cdf0c4f07.png
[F11]: /images/20220529/6eab19dc87744d1ab174e55fa0b5d6b5.png
[fullscreen]: /images/20220529/6dbdd166f199454dbeb089c91e3cebc9.png