全屏
操作在我们日常的网上冲浪还是挺常见的,尤其是在看视频的时候。另外就是在浏览器中进行复杂图形编辑操作的时候,如果能有一个全屏操作,那用户的编辑体验将会大大提升。
这里就记录一下前端兼容各个浏览器的启动和退出全屏方法。
万能的标准API其实已经包含了相关的几个方法:
- 全屏是否可用:Document.fullscreenEnabled
- 开启全屏:Document.requestFullScreen()
- 退出全屏:Document.exitFullscreen()
- 获取全屏元素:document.mozFullScreenElement
- 监听全屏模式变化: fullscreenchange
全屏是否可用: Document.fullscreenEnabled
fullscreenEnabled
属性提供了启用全屏模式的可能性。当它的值是 false
的时候,表示全屏模式不可用(可能的原因有 "fullscreen"
特性不被允许,或全屏模式不被支持等 )
function fullscreenEnabled() {
return (
document.fullscreenElement ||
document.mozFullScreenElement ||
document.webkitFullscreenElement
);
}
启动全屏: Document.requestFullscreen()
Element.requestFullscreen()
方法用于发出异步请求
使元素进入全屏模式。作用是请求浏览器将指定的元素设置为全屏模式, 结果会返回一个Promise
,全屏模式被激活的时候变成 resolved 状态。
如果全屏模式被禁用或者不支持,则会返回reject。Document.fullscreenEnabled 可用来判断是否支持全屏
模式。
function fullscreen(element) {
if (document.mozFullScreenEnabled) {
return Promise.reject(new Error("全屏模式被禁用"));
}
let result = null;
if (element.requestFullscreen) {
result = element.requestFullscreen();
} else if (element.mozRequestFullScreen) {
result = element.mozRequestFullScreen();
} else if (element.msRequestFullscreen) {
result = element.msRequestFullscreen();
} else if (element.webkitRequestFullscreen) {
result = element.webkitRequestFullScreen();
}
return result || Promise.reject(new Error("不支持全屏"));
}
退出全屏:Document.exitFullscreen()
Document.exitFullscreen()
方法用于让当前文档退出全屏模式。元素恢复到之前的状态。
MDN有这样的一个备注:
如果一个元素A在请求进去全屏模式之前,已经存在其他元素处于全屏状态,当这个元素A退出全屏模式之后,之前的元素仍然处于全屏状态。浏览器内部维护了一个全屏元素栈用于实现这个目的
Document.exitFullscreen() 方法让全屏元素栈的栈顶元素退出全屏状态,并让新的栈顶的元素进入全屏状态
这就意味着可以有多个元素同时全屏。并且这些全屏的元素被存储在一个栈中。
function cancelFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
获取全屏元素:document.mozFullScreenElement
该方法可以用来检查当前是否有元素处于全屏状态,如果有,则返回该元素,如果没有则返回null。
if (document.fullscreenElement === null) {
console.log("当前处于全屏模式");
} else {
console.log("当前不处于全屏模式");
}
监听全屏模式变化: fullscreenchange
实际业务中一般会存在监听全屏模式变化,例如:非全屏模式时候显示"全屏"按钮,全屏时候显示"退出全屏"按钮。这就需要我们监听全屏状态来控制操作按钮的显示与隐藏。
let isFullscreen = false;
const handler = () => {
isFullscreen = document.fullscreenElement !== null;
if (!isFullscreen) {
// 退出全屏时候解除监听,不然每次监听都会添加一次绑定
document.removeEventListener("fullscreenchange", handler);
}
};
document.addEventListener("fullscreenchange", handler);
以上 欢迎指正和补充~