浏览器全屏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);   //<html lang="en">......</html>
        } 
    }
    
  • 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文档)
Logo

CSDN联合极客时间,共同打造面向开发者的精品内容学习社区,助力成长!

更多推荐