前端使用js讓瀏覽器進(jìn)入全屏狀態(tài)蹲诀，退出全屏狀態(tài)，以及判斷是否為全屏狀態(tài)
基本原理：使用 Element.requestFullscreen() 方法發(fā)出異步請(qǐng)求使元素進(jìn)入全屏模式
調(diào)用此API并不能保證元素一定能夠進(jìn)入全屏模式平酿。
如果元素被允許進(jìn)入全屏幕模式，返回的Promise會(huì)resolve，并且該元素會(huì)收到一個(gè)fullscreenchange事件羡忘，通知它已經(jīng)進(jìn)入全屏模式。
如果全屏請(qǐng)求被拒絕磕昼，返回的promise會(huì)變成rejected并且該元素會(huì)收到一個(gè)fullscreenerror事件壳坪。
如果該元素已經(jīng)從原來(lái)的文檔中分離，那么該文檔將會(huì)收到這些事件掰烟。
1. 封裝為公共方法
進(jìn)入全屏：
// 進(jìn)入全屏
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);
}
}
這里增加一個(gè)方法爽蝴，用來(lái)判斷當(dāng)前是否為全屏，使用起來(lái)更簡(jiǎn)單些：
// 判斷是否為全屏
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();
}
}
}
