Bom dia!
Como faço para manter uma imagem em fullscreen mesmo depois do refresh utilizando JS?
Grato.
Bom dia!
Como faço para manter uma imagem em fullscreen mesmo depois do refresh utilizando JS?
Grato.
Olá Caio,
Para manter uma imagem em fullscreen mesmo depois do refresh utilizando JS, você pode utilizar o método requestFullscreen()
do objeto document.documentElement
. Esse método permite que você coloque o elemento em tela cheia.
Para manter a imagem em tela cheia após o refresh, você pode armazenar em um cookie ou no localStorage
do navegador o estado da imagem em tela cheia. Depois, ao carregar a página novamente, você pode verificar se o estado da imagem estava em tela cheia e, se sim, chamar o método requestFullscreen()
novamente.
Aqui está um exemplo de código que pode ajudá-lo:
const img = document.getElementById('minha-imagem');
if (localStorage.getItem('fullscreen')) {
img.requestFullscreen();
}
function toggleFullscreen() {
if (document.fullscreenElement) {
localStorage.setItem('fullscreen', true);
} else {
localStorage.removeItem('fullscreen');
}
}
img.addEventListener('click', toggleFullscreen);
Nesse exemplo, a imagem é colocada em tela cheia quando o usuário clica nela. Se o usuário atualizar a página enquanto a imagem estiver em tela cheia, o código verifica se o estado da imagem estava em tela cheia e, se sim, chama o método requestFullscreen()
novamente.
Espero ter ajudado e bons estudos!