23

Noto que os principais browsers ficam em modo tela cheia ao apertar a tecla F11, isso é uma funcionalidade do próprio browser ou é possível ativar isso através de algum código de JavaScript?

Caso não dê para fazer via código, como abrir uma nova janela somente com a página. Sem botões do navegador, e com a barra de endereços bloqueada etc.

2 Respostas 2

16

Existe uma forma de simular o uso da tecla F11, mas não pode ser automatizado.

Como se trata de uma funcionalidade que só o utilizador pode controlar, o mesmo terá que clicar num botão (por exemplo), de forma a activar o modo de ecrã inteiro.

  • Exemplo Alternar

    Este exemplo permite fazer a alternância entre ecrã inteiro e janela normal do navegador através do clique no mesmo elemento.

    Botão de acção

    <input type="button" value="clique para alternar" onclick="toggleFullScreen()">
    

    Função

    function toggleFullScreen() {
      if ((document.fullScreenElement && document.fullScreenElement !== null) ||    
       (!document.mozFullScreen && !document.webkitIsFullScreen)) {
        if (document.documentElement.requestFullScreen) {  
          document.documentElement.requestFullScreen();  
        } else if (document.documentElement.mozRequestFullScreen) {  
          document.documentElement.mozRequestFullScreen();  
        } else if (document.documentElement.webkitRequestFullScreen) {  
          document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);  
        }  
      } else {  
        if (document.cancelFullScreen) {  
          document.cancelFullScreen();  
        } else if (document.mozCancelFullScreen) {  
          document.mozCancelFullScreen();  
        } else if (document.webkitCancelFullScreen) {  
          document.webkitCancelFullScreen();  
        }  
      }  
    } 
    
  • Exemplo Mudar para Ecrã Inteiro

    Este exemplo permite activar o modo de ecrã inteiro sem fazer alternância, ou seja, o utilizador muda para ecrã inteiro mas para voltar ao ecrã normal terá que usar a tecla F11:

    Botão de acção

    <input type="button" value="clique para ativar tela cheia" onclick="requestFullScreen()">
    

    Função

    function requestFullScreen() {
    
      var el = document.body;
    
      // Supports most browsers and their versions.
      var requestMethod = el.requestFullScreen || el.webkitRequestFullScreen 
      || el.mozRequestFullScreen || el.msRequestFullScreen;
    
      if (requestMethod) {
    
        // Native full screen.
        requestMethod.call(el);
    
      } else if (typeof window.ActiveXObject !== "undefined") {
    
        // Older IE.
        var wscript = new ActiveXObject("WScript.Shell");
    
        if (wscript !== null) {
          wscript.SendKeys("{F11}");
        }
      }
    }
    

Fontes e informação útil que encontrei sobre este assunto:


Créditos da resposta para o utilizador @Zuul nesta resposta no StackOverflow original.

4
  • 1
    as urls estão todas quebradas do exemplo
    – Dorath
    Commented 20/04/2016 às 18:17
  • Os links de exemplos já não funcionam mais.
    – Bsalvo
    Commented 3/10/2017 às 12:23
  • @Bsalvo Obrigado, vou ver e colocar novamente online.
    – Zuul
    Commented 3/10/2017 às 14:35
  • 1
    A quem deu voto negativo! Dá para explicar o que está errado na resposta ?
    – Zuul
    Commented 3/10/2017 às 17:42
9

É possível ativar tela cheia via JavaScript em certos browsers. Inclusive, é possível colocar um único elemento em fullscreen (como um vídeo), ou o documento inteiro.

Exemplo para o documento inteiro (extraído da MDN):

function toggleFullScreen() {
  if (!document.fullscreenElement &&    // alternative standard method
      !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement ) {  // current working methods
    if (document.documentElement.requestFullscreen) {
      document.documentElement.requestFullscreen();
    } else if (document.documentElement.msRequestFullscreen) {
      document.documentElement.msRequestFullscreen();
    } else if (document.documentElement.mozRequestFullScreen) {
      document.documentElement.mozRequestFullScreen();
    } else if (document.documentElement.webkitRequestFullscreen) {
      document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
    }
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    }
  }
}

Essa API ainda não está totalmente standardizada. Um tempo atrás, havia uma restrição de que o modo tela cheia precisaria ser disparado por intervenção do usuário (como um clique em algo). Não tenho certeza se a restrição ainda existe, não vi referência no artigo atual da MDN (mas há indícios de que essa limitação já existiu no Firefox).

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .