O próprio navegador fornece suporte de API para tela cheia, mas a compatibilidade do navegador precisa ser considerada. Se você usar a API JavaScript de tela cheia em navegadores, poderá usar o plug-in screenfull, que já tratou da compatibilidade.
1. API nativa em tela cheia
- tela cheia global
// 全局全屏
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();
}
}
};
- Especifique o conteúdo em tela cheia
// 局部全屏
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();
}
}
};
Se a compatibilidade do navegador for considerada, a função completa deve 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. plug-in de tela cheia
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();
};
Suporte do navegador
Suporte do navegador para visualizar
parâmetro
- isEnabled
retorna um booleano se você tem permissão para ir em tela cheia - isFullscreen
retorna um booleano se a tela cheia estiver ativa - toggle(elemento, opções?)
Solicitar tela cheia se inativo, sair caso contrário.
Aceita um elemento DOM e FullscreenOptions.
Retorna uma promessa que resolve depois que o elemento entra/sai da tela cheia