MDN: 全屏 API 为使用用户的整个屏幕展现网络内容提供了一种简单的方式. 这种 API 让你可以简单地控制浏览器, 使得一个元素与其子元素, 如果存在的话, 可以占据整个屏幕, 并在此期间, 从屏幕上隐藏所有的浏览器用户界面以及其他应用.
概览
- document.fullscreen
- document.fullscreenElement
- document.fullscreenEnabled
- elem.requestFullscreen
- document.exitFullscreen
- document.onfullscreenchange
- document.onfullscreenerror
属性
document.fullscreen
用于检测当前文档是否处于全屏模式, 返回值为布尔类型
document.fullscreenElement
当前激活全屏模式的元素
document.fullscreenEnabled
当前文档是否支持全屏
方法
请求全屏模式
一个全屏的请求应该由一个具体的元素发出, 以 video 元素为例, 请求方式如下:
<video controls id="video">
<source src="somevideo.webm"></source>
<source src="somevideo.mp4"></source>
</video>
复制代码
- var elem = document.getElementById("video");
- elem.addEventListener('click',function () {
- if (elem.requestFullscreen) {
- elem.requestFullscreen();
- }
- });
复制代码
MDN: 全屏请求必须在事件处理函数中调用, 否则将会被拒绝.
退出全屏模式
方式一: 按 ESC 或 F11 键退出全屏
方式二:[keydown event] +
document.exitFullscreen
自定义全屏退出逻辑
- // 按 Enter 建退出全屏
- document.addEventListener("keydown", function(e) {
- if (e.keyCode == 13) {
- document.exitFullscreen();
- }
- }, false);
复制代码
注意: exitFullscreen 方法只存在于 document 对象上, 而不存在与 elem
事件
onfullscreenchange
onfullscreenchange 事件触发的时刻的有 2 个: 一是进入全屏时, 二是退出全屏时. 也就是说如果全屏模式的状态发生了改变, 那么 onfullscreenchange 事件就会被触发
- document.onfullscreenchange = function ( event ) {
- console.log("全屏模式状态改变");
- };
复制代码
onfullscreenerror
当尝试在不支持全屏模式的元素上请求全屏时, 则会发生错误, 这个错误会触发 onfullscreenerror 事件
- document.onfullscreenerror = function ( event ) {
- console.log("全屏模式失败");
- };
复制代码
验证 onfullscreenerror 事件最简单的方式就是: 在事件监听器之外发起全屏请求. 因为 ** 全屏请求必须在事件处理函数中调用, 否则将会被拒绝.** 在拒绝的同时会产生一个错误, 这个错误会触发 onfullscreenerror 事件
- document.onfullscreenerror = function ( event ) {
- console.log("全屏模式失败");
- };
- // requestFullscreen() 将会失败, 因为它在事件处理器之外
- document.documentElement.requestFullscreen();
复制代码
全屏样式
Gecko 会自动为进入全屏模式的元素添加额外样式:
width: 100%; height: 100%l;
, 目的是使其铺满整个屏幕; 而 webkit 没有这种默认行为, 所以需要我们手动补充这个样式
- #video:-webkit-full-screen {
- width: 100%;
- height: 100%;
- }
复制代码
兼容
PC 端
移动端
前缀
表 1
表 2
结语
本文绝大部分参考 MDN 文档, 目的是整理 Web 全屏 Api, 非原创文章
来源: https://juejin.im/post/5b73d5d651882560ff5c15a4