浏览器本身提供了对screenfull的API支持，但是需要考虑浏览的兼容性。如果跨浏览器使用 JavaScript 全屏 API，可以使用screenfull插件，该插件已对兼容性做了处理。
1、screenfull原生API
- 全局全屏
// 全局全屏
const screen = () => {
let element = document.documentElement;
// 不全屏是null,返回false,
let isFull= document.fullscreenElement === null ? false : true;
// 全屏状态切换
if (isFull) {
// 退出全屏
if (document.exitFullscreen) {
document.exitFullscreen();
}
} else {
// 全屏
if (element.requestFullscreen) {
element.requestFullscreen();
}
}
};
- 指定内容全屏
// 局部全屏
const partScreen = () => {
/* 获取(<html>)元素以全屏显示页面 */
const full = document.getElementById('mainContent');
let isFull = document.fullscreenElement === null ? false : true;
if (!isFull) {
if (full && full.requestFullscreen) {
full.requestFullscreen();
}
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
}
}
};
如果考虑浏览器兼容性的话，完整的功能应该是
const openFullscreen = () => {
/* 获取(<html>)元素以全屏显示页面 */
const full = document.getElementById('mainContent');
if (full.RequestFullScreen) {
full.RequestFullscreen();
} else if (full.mozRequestFullScreen) {
//兼容Firefox
full.mozRequestFullScreen();
} else if (full.webkitRequestFullScreen) {
//兼容Chrome, Safari and Opera等
full.webkitRequestFullScreen();
} else if (full.msRequestFullscreen) {
//兼容IE/Edge
full.msRequestFullscreen();
}
};
const exitFullscreen = () => {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) {
//兼容Firefox
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
//兼容Chrome, Safari and Opera等
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) {
//兼容IE/Edge
document.msExitFullscreen();
}
};
2、screenfull插件
安装
npm i screenfull
使用
import screenfull from 'screenfull';
// 使用screenfull插件
let isFullscreen = ref(false);
const plugin = () => {
const element = document.getElementById('mainContent');
if (screenfull.isEnabled && !screenfull.isFullscreen) {
screenfull.request(element);
}
isFullscreen.value = !screenfull.isFullscreen;
screenfull.toggle();
};
浏览器支持情况
参数
- isEnabled
返回一个布尔值是否允许您进入全屏 - isFullscreen
返回一个布尔值是否全屏处于活动状态 - toggle(element, options?)
如果不活动则请求全屏，否则退出。
接受一个 DOM 元素和FullscreenOptions.
返回在元素进入/退出全屏后解决的承诺