Evento Fullscreen

O JavaScript conta com uma API que permite adiciona métodos no elemento que quiser para apresentar em modo tela cheia e sair desse modo quando for solicitado.

Fiz um exemplo usando o projeto Alura MIDI do curso JavaScript para Web: Crie páginas dinâmicas.

Para começar criei dois botões e adicionei o onclick com o nome das funções responsáveis por abrir e fechar o modo tela cheia.

<button class="btn" onclick="abrirTelaCheia()" >Abrir tela cheia</button>
        <button class="btn" onclick="fecharTelaCheia()">Fechar tela cheia</button>

Em seguida criei uma variável recebendo o elemento que quero deixar em tela cheia, no meu caso será toda a página, por isso o elemento será o body.

var elem = document.body;

Com isso posso criar o método para verificar se o elemento não está em tela cheia e habilitar o modo, farei com que esse método seja compatível para maioria dos navegador criando condicionais de verificação para eles.

function abrirTelaCheia() {
    if (elem.requestFullscreen) {
        elem.requestFullscreen();
    } else if (elem.mozRequestFullScreen) { /* Firefox */
        elem.mozRequestFullScreen();
    } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
        elem.webkitRequestFullscreen();
    } else if (elem.msRequestFullscreen) { /* IE/Edge */
        elem.msRequestFullscreen();
    }
}

Agora farei o mesmo para sair do modo também compatível para a maioria dos navegadores.

function fecharTelaCheia() {
    if (document.exitFullscreen) {
        document.exitFullscreen();
    } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
    } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
    }
}

Você pode saber mais sobre essa API incrível na Documentação do MDN.

Abraço.