El navegador en sí proporciona soporte API para pantalla completa, pero se debe considerar la compatibilidad del navegador. Si usa la API de pantalla completa de JavaScript en todos los navegadores, puede usar el complemento de pantalla completa, que ya ha manejado la compatibilidad.
1. API nativa de pantalla completa
- pantalla completa mundial
// 全局全屏
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();
}
}
};
- Especificar contenido a pantalla completa
// 局部全屏
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();
}
}
};
Si se considera la compatibilidad del navegador, la función completa debe ser
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. Complemento de pantalla completa
Instalar
npm i screenfull
usar
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();
};
Compatibilidad con navegador
Compatibilidad con navegador para ver
parámetro
- isEnabled
devuelve un booleano si se le permite ir a pantalla completa - isFullscreen
devuelve un booleano si la pantalla completa está activa - alternar (elemento, opciones?)
Solicitar pantalla completa si está inactivo, salir de lo contrario.
Acepta un elemento DOM y FullscreenOptions.
Devuelve una promesa que se resuelve después de que el elemento entra/sale de pantalla completa