浏览器全屏API

浏览器全屏API

全屏 API为使用用户的整个屏幕展现网络内容提供了一种简单的方式，并且在不需要时退出全屏模式。这种 API 让你可以简单地控制浏览器，使得一个元素与其子元素，如果存在的话，可以占据整个屏幕，并在此期间，从屏幕上隐藏所有的浏览器用户界面以及其他应用
全屏 API 提供了一些其他接口以供实现全屏所需的方法、属性、事件处理函数

全屏 API 方法：

• Element.requestFullscreen(options)：请求浏览器（user agent）将特定元素（甚至延伸到它的后代元素）设置为全屏模式，隐去屏幕上的浏览器所有 UI 元素，以及其它应用。返回一个 Promise，并会在全屏模式被激活的时候变成 resolved 状态
  参数：options：可选，唯一的选项是 navigationUI，控制在元素处于全屏模式时是否显示导航条，值包括：
  
  
  • auto：默认值，将由浏览器来决定是否显示导航条
  • hide：浏览器的导航条将被隐藏，屏幕的整个尺寸将分配给元素的显示
  • show：浏览器将显示页面导航条和可能的其他用户界面；元素的尺寸（以及屏幕的感知大小）将被固定，以便为该用户界面留出空间

  <div id="app"></div> <button id="btn">全屏模式</button> <script> var app = document.getElementById("app"); var btn = document.getElementById("btn"); //点击按钮实现app元素全屏显示 btn.addEventListener("click", function() { 
        if(app.requestFullscreen) { 
        //全屏显示 app.requestFullscreen(); } }); </script> 

• Document.exitFullscreen()：用于请求从全屏模式切换到窗口模式（退出全屏模式），会返回一个 Promise，会在全屏模式完全关闭的时候被置为 resolved 状态

  //点击页面切换全屏模式 document.onclick = function(event) { 
        //判断是否处于全屏模式 if(document.fullscreenElement) { 
        //退出全屏 document.exitFullscreen(); }else { 
        //全屏显示 document.documentElement.requestFullscreen(); } } 

全屏 API 属性：

Document 提供了可以用于判断是否支持和启用全屏模式的属性，也能得知现在是否处在全屏模式、哪一个元素在使用屏幕等信息

• DocumentOrShadowRoot.fullscreenElement：fullscreenElement 属性提供了当前在 DOM （或者 shadow DOM）里被展示为全屏模式的 Element，如果这个值为 null，文档不处于全屏模式

  //点击页面切换全屏模式 document.onclick = function(event) { 
        //判断是否处于全屏模式 if(document.fullscreenElement) { 
        //退出全屏 document.exitFullscreen(); //处于全屏模式的元素 console.log(document.fullscreenElement); //null }else { 
        //全屏显示 document.documentElement.requestFullscreen(); //处于全屏模式的元素 console.log(document.fullscreenElement); // ......  } } 

• Document.fullscreenEnabled：fullscreenEnabled 属性提供了启用全屏模式的可能性。当它的值是 false 的时候，表示全屏模式不可用（可能的原因有 “fullscreen” 特性不被允许，或全屏模式不被支持等 ）

  <div id="app"></div> <button id="btn">全屏模式</button> <script> var app = document.getElementById("app"); var btn = document.getElementById("btn"); //点击按钮实现app元素全屏显示 btn.addEventListener("click", function() { 
        //判断是否支持全屏模式 if(document.fullscreenEnabled) { 
        //全屏显示 app.requestFullscreen(); }else { 
        alert("您的浏览器不支持全屏模式"); } }); </script> 

事件处理程序：

• Document.onfullscreenchange：fullscreenchange 事件的处理程序，当进入全屏或退出全屏时，事件将被发送到 Document 上。此处理程序仅在整个文档全屏模式更改时有效

  //监听进入全屏或退出全屏 document.onfullscreenchange = function(event) { 
        console.log("全屏模式发生变化"); } 

• Document.onfullscreenerror：fullscreenerror 事件的处理程序，当进入全屏或退出全屏出错时，事件将被发送到 Document 上，仅对整个文档的全屏模式更改出错时候有效

  //监听进入全屏或退出全屏发生错误 document.onfullscreenerror = function(event) { 
        console.log("全屏模式发生错误"); } 

兼容性处理：

//全屏显示  function requestFullScreen() { 
    var de = document.documentElement; if(de.requestFullscreen) { 
    de.requestFullscreen(); }else if(de.mozRequestFullScreen) { 
    de.mozRequestFullScreen(); }else if(de.webkitRequestFullScreen) { 
    de.webkitRequestFullScreen(); } } //退出全屏  function exitFullscreen() { 
    var d = document; if(d.exitFullscreen) { 
    d.exitFullscreen(); }else if(d.mozCancelFullScreen) { 
    d.mozCancelFullScreen(); }else if(d.webkitCancelFullScreen) { 
    d.webkitCancelFullScreen(); } } 

参考文档：全屏 API（MDN文档）