前端使用js让浏览器进入全屏状态，退出全屏状态，以及判断是否为全屏状态
基本原理：使用 Element.requestFullscreen() 方法发出异步请求使元素进入全屏模式
调用此API并不能保证元素一定能够进入全屏模式。
如果元素被允许进入全屏幕模式，返回的Promise会resolve，并且该元素会收到一个fullscreenchange事件，通知它已经进入全屏模式。
如果全屏请求被拒绝，返回的promise会变成rejected并且该元素会收到一个fullscreenerror事件。
如果该元素已经从原来的文档中分离，那么该文档将会收到这些事件。
1. 封装为公共方法
进入全屏：
// 进入全屏
export function fullScreen() {
let el = document.documentElement;
let rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullscreen;
if (typeof rfs != "undefined" && rfs) {
rfs.call(el);
};
return;
}
退出全屏：
//退出全屏
export function exitScreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
}
else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
}
else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
if (typeof cfs != "undefined" && cfs) {
cfs.call(el);
}
}
这里增加一个方法，用来判断当前是否为全屏，使用起来更简单些：
// 判断是否为全屏
export function isFullScreen() {
return !! (
document.fullscreen ||
document.mozFullScreen ||
document.webkitIsFullScreen ||
document.webkitFullScreen ||
document.msFullScreen
);
}
2. 具体使用
import { fullScreen, exitScreen, isFullScreen } from "../../utils/getMaininfo";
methods: {
/* 是否为全屏 */
screenClick() {
if (!isFullScreen()) {
fullScreen();
} else {
exitScreen();
}
}
}
