浏览器全屏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文档）
# 前端 # javascript
Logo
CSDN学习社区

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

更多推荐

嵌入式作业（七）：基于Ardunio的STM32串口通信

嵌入式作业（七）0作业要求1Ardunio 完成STM32的串口通信（1）安装Ardunio IDE（2）stm32串口通信2关于 stduino IDE0作业要求安装 Ardunio IDE 和相关软件支持库，在Ardunio 完成STM32板子的串口通信程序：（1）持续向串口输出“Hello world！”；（2）当接收到“stop!”时，停止输出。网上有一个国人版的MCU集成开发平台， st

avatar CSDN学习社区

JDBC详解

JDBC文章目录JDBC什么是JDBC?JDBC驱动程序:Java使用JDBC访问数据库的步骤:设置classpath:Oracle连接字符串的书写格式:简单的例子:常用数据库的驱动程序及JDBC URL:Oracle数据库:SQL Server数据库MySQL数据库Access数据库PreparedStatement接口:JNDI-数据源（Data Source）与连接池（Connection

avatar CSDN学习社区

“模式识别与机器学习”学习笔记no2.再谈感知机

接**上篇：上篇主要进行了PLA，Pocket算法的理论过程分析和在给定数据集上利用pocket算法对数据集进行分类学习，得到错分数量最少的分类面。上篇中pocket算法的过程已经进行了编程和测试，框架已经建立了起来，这一篇主要上篇中没有提到或涉及不深的几个问题。1.数据集的构造。上篇是直接使用了题目给的向量，这次来根据正态分布来产生数据集。np.random.normal函数可以根据均值和方差生

avatar CSDN学习社区