浏览器全屏API

最新推荐文章于 2024-06-20 00:35:35 发布

廊坊吴彦祖

最新推荐文章于 2024-06-20 00:35:35 发布

阅读量472

点赞数

分类专栏： js 文章标签：前端 web javascript js

本文链接：https://blog.csdn.net/weixin_45426836/article/details/110530344

版权

js 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

浏览器全屏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文档）

廊坊吴彦祖

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
浏览器全屏API

浏览器全屏API全屏 API为使用用户的整个屏幕展现网络内容提供了一种简单的方式，并且在不需要时退出全屏模式。这种 API 让你可以简单地控制浏览器，使得一个元素与其子元素，如果存在的话，可以占据整个屏幕，并在此期间，从屏幕上隐藏所有的浏览器用户界面以及其他应用全屏 API 提供了一些其他接口以供实现全屏所需的方法、属性、事件处理函数全屏 API 方法：Element.requestFullscreen(options)：请求浏览器（user agent）将特定元素（甚至延伸到它的后代元素）设置
复制链接

扫一扫

专栏目录