Fullscreem com Javascript

Jorge Rodrigues
Facebook Linkedin Instagram Pinterest

Fullscreen com Javascript é um recurso muito interessante que vem sendo utilizado ultimamente para a exibição de vídeo e imagens. O que é mais interessante, é que este recurso pode ser aplicado, não só para vídeos e imagens. Um formulário ou dashboard também podem ser exibidos em fullscreen.

Neste artigo vamos ver como aplicar o modo fullscreen em um elemento específico da página. Vamos criar uma página simples que utiliza Javascript para exibir uma imagem em fullscreen.

O fullscreen é o modo de exibição dos navegadores onde o site é exibido em toda a tela do navegador, sem a moldura, tem barra de título ou menus.

Esse modo de visualização pode ser ativado no navegador pressionando a tecla F11 em qualquer site. Este recurso foi implementado pela Fullscreen API do HTML5, e pode ser controlado pelo Javascript.

Não vou entrar em detalhes sobre Fullscreen API pois o objetivo é um artigo objetivo e prático. Então se você quiser saber um pouco mais sobre a HTML5 Fullscreen API, é só pesquisar na web que já conta com vários artigos sobre o assunto.

HTML

Vamos começar pelo HTML. É um HTML muito simples onde vamos apenas exibir uma imagem na página como um thumbnail.

<!DOCTYPE HTML>
<html>
<head>
   <title>fullscreen</title>
</head>
<body onload="docReady()">

   <div id="container">
      <div id="fullScreenTools" class="botao">
         <input id="closer" class="icon" name="closer" type="button" value="X">
      </div>
      <img id="trigger" src="http://guiaviajarmelhor.com.br/wp-content/uploads/2015/05/Escocia-edimburgo.png" width="20%" alt="">
   </div>

</body>
</html>

Temos duas DIVs, uma é a DIV “fullscreenTools”. Esta é uma barra localizada na parte superior da tela onde poderão ser inseridos botões para fechar e outras operações. Neste exemplo esta DIV será somente um botão transparente com um “X” localizado na parte superior direita da tela que quando clicado, encerra o modo fullscreen. Para isso, adicionei a classe CSS button a DIV. Para ver a DIV como barra, basta retirar esta classe.

A outra DIV é a “container”. Esta DIV será o elemento para o qual vamos implementar o recurso de ativação do modo de exibição fullscreen. A DIV contém a barra de ferramentas/botão “fullscreenTools” e a imagem. Então quando o modo fullscreen for ativado para a DIV “container”, tudo dentro dela será exibido em tela cheia.

Merece atenção especial o atributo do tag body que define a função que deverá ser executada no evento “onload” do documento. Esta é a função principal do nosso código Javascript e será nela que vamos incluir todo o nosso script. No final do bloco sobre Javascript, entrarei em detalhes sobre esta função.

CSS

A folha de estilo para este projeto não tem nenhum mistério, então não vou me aprofundar nela. O único detalhe que merece atenção, é a regra para o elemento #container, onde os valores das propriedades top, left, bottom e right foram ajustados para 0 (zero). Vamos detalhar isso mais a frente, na seção que fala sobre o Javascript.

<style>
* {
   /*** As propriedades padding e a border não serão atribuídas a largura do elemento. */
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}

body {
   margin: 0;
   padding: 0;
}

#container {
   position: relative;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   overflow: auto;
}

/*** A barra fica 100% da largura da tela. */
#fullScreenTools {
   position: relative;
   display: none;
   width: 100%;
   padding: 5px;
   text-align: right;
   background-color: #000000;
   opacity:0.65;
   -moz-opacity: 0.65;
   filter: alpha(opacity=65);

}
/*** Aqui a barra se torna um botão. */
#fullScreenTools.botao {
   position: fixed;
   top: 50px;
   right: 50px;
   height: 50px;
   width: 50px;
   padding: 0;
   border: 1px solid #fff;
   background-color: transparent;
}
#fullScreenTools.botao:hover {
   width: 60px;
   height: 60px;
   top: 45px;
   right: 45px;
}
#closer {
   margin-right: 10px;
   color: #fff;
   border: none;
   border: 1px solid #fff;
   background-color: transparent;
}
#closer.icon {
   width: 100%;
   height: 100%;
   margin-right: 0;
   font-size: 23px;
   color: #fff;
   border: none;
   background-color: transparent;
}
#closer.icon:hover {
   font-size: 30px;
}
</style>

JAVASCRIPT

Agora vamos ao mais importante, o código que realmente faz a coisa funcionar. Vou dividir o código em parte mas ele deve ficar em um único bloco .</p>

"use strict";
//—- V A R I A V E I S
var fullscreenElement = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement;
var fullscreenEnabled = document.fullscreenEnabled || document.mozFullScreenEnabled || document.webkitFullscreenEnabled;
var elem;
var tools;
var trigger;
var isFull;
var method;       // Se for o padrao, recebe uma string vazia. Se for webkit, ms ou moz, recebe o prefixo correspondente.
var closer;       //  Elemento que quando clicado, sai da tela cheia.
var trigger_w;

//—- F U N C O E S
var enterFullScreen;       // Funcao entra no modo tela cheia
var exitFullScreen;        // Funcao sai do modo tela cheia
var isFullScreen;

No trecho acima declaramos os nomes das variáveis e funções do script.

Na primeira linha, usei a diretiva use strict. Isso vai permitir melhorar a qualidade do nosso código JavaScript. Quem quiser saber mais sobre “use strict”, pode acessar o site W3Schools.

Nas linhas seguintes, são declarados os nomes das variáveis e funções utilizadas no script.

Funções principais

São duas as funções principais do projeto. As funções enterFullScreen e exitFullScrren. Ambas utilizam a HTML5 Full-Screen API. Vamos a elas.

/**
*  Ativa modo fullscreen
*/
enterFullScreen = function(element,callBack) {

   isFull = false;
   method = null;

   element.style.position = "absolute";

   if (element.requestFullscreen) {
      element.requestFullscreen();
      isFull = true;
      method = "";
   } else if (element.msRequestFullscreen) {
      element.msRequestFullscreen();
      isFull = true;
      method = "ms";
   } else if (element.mozRequestFullScreen) {
      element.mozRequestFullScreen();
      isFull = true;
      method = "moz";
   } else if (element.webkitRequestFullscreen) {
      element.webkitRequestFullscreen();
      isFull = true;
      method = "webkit";
   }

   if(isFull) {
      if(callBack!=undefined) callBack();
   }

}

/**
*   Desativa modo fullscreen
*/
exitFullScreen = function(element, callBack) {

   element.style.position = "initial";

   if(document.exitFullscreen) {
      document.exitFullscreen();
      isFull = false;
   } else if(document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
      isFull = false;
   } else if(document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
      isFull = false;
   }

   if(isFull===false) {
      if(callBack!=undefined) callBack();
   }
}

Como a API não é totalmente compatível com todas versões de navegadores, as duas funções utilizam métodos de compatibilidade MS, Moz e Webkit.

Funções secundárias

Só temos uma função secundária, é a função isFullScreen. Esta função utiliza o método fullScreen da API para determinar se o modo fullscreen está ativado ou não.

/**
*  Determina se esta em modo tela cheia ou nao
*/
isFullScreen = function() {
   return document.fullScreen ||
          document.msFullScreen ||
          document.mozFullScreen ||
          document.webkitIsFullScreen;
}

Mais Javascript

Além das funções principais e secundárias, nosso Javascript ainda conta com mais algumas linhas código que vamos descrever agora.

// O elemento a ser exibido em fullscreen
elem = document.getElementById("container");

// Barra/botao exibido em fullscreen 
tools = document.getElementById("fullScreenTools");

// Elemento da página que ao ser clicado ativa o fullscreen
trigger = document.getElementById("trigger");

// Como no projeto o trigger é uma imagem, e a imagem está sendo exibida
// de forma reduzida, guardo a largura com que ela esta sendo exibida para 
// recuperar quando o modo fullscreen for desativado.
trigger_w = trigger.width;

// Elemento da página que ao ser clicado desativa o fullscreen
closer = document.getElementById("closer");

O fragmento acima, define os valores das variáveis do nosso script e conta com uma breve descrição de cada uma delas.

Chegou a hora de definir os event listenners, ou sensores de eventos (não encontrei uma tradução melhor), para os elementos “trigger” e “closer”.

/**
*   Adicionando sensor de evento ao elemento que ativam a tela cheia
*/
trigger.addEventListener("click", function() {
   this.style.width = "100%";
   enterFullScreen(elem, function() {
      if( isFull ) {
         tools.style.display = "block";
      }
   });
});

/**
*   Adicionando sensor de evento ao botão que desativa a tela cheia
*/
closer.addEventListener("click", function() {
   trigger.style.width = trigger_w + "px";    //"initial";
   exitFullScreen(elem, function() {
      if( !isFull ) {
         tools.style.display = "none";
      }
   });

});

No fragmento acima, fazemos a chamada a duas funções. Uma para ativar e outra para desativar o modo fullscreen. São as funções enterFullScreen e exitFullScreen.

A função enterFullScreen

Esta função recebe dois parâmetros. O primeiro é o identificador do elemento que deve ser exibido em fullscreen contido na variável pública “elem”, declarada no início do script e cujo o valor é definido na função docReady que será detalhada mais à frente. 

O segundo parâmetro é uma função de callback que altera a propriedade CSS “display” da DIV “fullscreenTools” para “block”, o que faz com ela seja exibida.

/**
*  Entra em tela cheia
*/
enterFullScreen = function(element,callBack) {

   isFull = false;
   method = null;

   element.style.position = "absolute";

   if (element.requestFullscreen) {
      element.requestFullscreen();
      isFull = true;
      method = "";
   } else if (element.msRequestFullscreen) {
      element.msRequestFullscreen();
      isFull = true;
      method = "ms";
   } else if (element.mozRequestFullScreen) {
      element.mozRequestFullScreen();
      isFull = true;
      method = "moz";
   } else if (element.webkitRequestFullscreen) {
      element.webkitRequestFullscreen();
      isFull = true;
      method = "webkit";
   }

   if(isFull) {
      if(callBack!=undefined) callBack();
   }

}

Na função enterFullScreen primeiro nós alteramos a propriedade CSS position do elemento para absolute. Isso possibilita a configuração das propriedades top, left, bottom e right para 0 (zero), fazendo com que o elemento, no caso a DIV “container”, ocupe 100% da tela.  Este método funciona melhor do que definir o valor das propriedades width e height para 100%.

Não basta apenas ativar o modo fullscreen, pois isto apenas coloca a janela do navegador em tela cheia. Também é necessário ajustar o CSS da DIV “container” para que a ela ocupe toda a janela.

Em seguida, ativamos o modo fullscreen e depois fazemos a chamada a função de callback já mencionada acima.

A função exitFullScreen

A função exitFullScreen, basicamente reverte o que foi feito na função enterFullScreen.

Na primeira linha, revertemos a propriedade CSS position do elemento DIV container para o seu valor inicial ou padrão. Depois, desativamos o modo fullscreen e em seguida, fazemos a chamada da função de callback, que como pode ser visto no event listener de closer, altera a propriedade CSS display de fullscreenTools para none, o que oculta o elemento fullscreenTools.

/**
*   Sai da tela cheia
*/
exitFullScreen = function(element, callBack) {

   element.style.position = "initial";

   if(document.exitFullscreen) {
      document.exitFullscreen();
      isFull = false;
   } else if(document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
      isFull = false;
   } else if(document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
      isFull = false;
   }

   if(isFull===false) {
      if(callBack!=undefined) callBack();
   }

}

Finalizando

Agora chegou a hora de juntar todas as parte do quebra-cabeças. Neste artigo optei por manter o CSS e o Javascript no arquivo HTML, mas nada impede que você use arquivos separados.

Como mencionado no início deste artigo, na parte referente ao HTML, todos os fragmentos de código Javascript, exceto o primeiro fragmento de declaração de variáveis, devem estar dentro da função docReady. A chamada desta função será feita no tag body do documento através do atributo “onload”. Isto fará com que a função seja executada somente depois que todos os elementos do documento forem carregados pelo navegador.

Segue o código HTML completo da página incluindo o CSS e o Javascript embutidos no tag “head”.

<!DOCTYPE HTML>
<html>
<head>
   <title></title>
   <meta charset="ISO-8859-1">

   <style>
   * {
      /* padding e a border não serão atribuidas a largura do elemento */
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
   }

   body {
      margin: 0;
      padding: 0;
   }

   #container {
      position: relative;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      overflow: auto;
   }

   /* a barra fica 100% da largura da tela */
   #fullScreenTools {
      position: relative;
      display: none;
      width: 100%;
      padding: 5px;
      text-align: right;
      background-color: #000000;
      opacity:0.65;
      -moz-opacity: 0.65;
      filter: alpha(opacity=65);

   }
   /* aqui a barra se torna um botao a direita da tela */
   #fullScreenTools.botao {
      position: fixed;
      top: 50px;
      right: 50px;
      height: 50px;
      width: 50px;
      padding: 0;
      border: 1px solid #fff;
      background-color: transparent;
   }
   #fullScreenTools.botao:hover {
      width: 60px;
      height: 60px;
      top: 45px;
      right: 45px;
   }
   #closer {
      margin-right: 10px;
      color: #fff;
      border: none;
      border: 1px solid #fff;
      background-color: transparent;
   }
   #closer.icon {
      width: 100%;
      height: 100%;
      margin-right: 0;
      font-size: 23px;
      color: #fff;
      border: none;
      background-color: transparent;
   }
   #closer.icon:hover {
      font-size: 30px;
   }
   </style>


   <script>
   "use strict";

   // V A R I A V E I S
   var elem;
   var tools;
   var trigger;
   var isFull;
   var method;       // Se for o padrao, recebe uma string vazia. Se for webkit, ms ou moz, recebe o prefixo correspondente.
   var closer;       //  Elemento que quando clicado, sai da tela cheia.
   var trigger_w;


   // F U N C O E S
   var enterFullScreen;       // Funcao entra no modo tela cheia
   var exitFullScreen;        // Funcao sai do modo tela cheia
   var isFullScreen;


   /*********************************
   *  QUANDO O DOCUMENTO ESTIVER CARREGADO
   */
   var docReady = function() {
      
      // o elemento a ser exibido em fullscreen
      //elem = document.documentElement;   // a pagina em si
      elem = document.getElementById("container");  // um elemento da pagina

      // barra/botao exibido em fullscreen
      tools = document.getElementById("fullScreenTools");

      // elemento da página que ao ser clicado ativa o fullscreen
      trigger = document.getElementById("trigger");

      // como no projeto o trigger é uma imagem, tenho que ajustar o tamanho da imagem ao container
      trigger_w = trigger.width;

      // elemento da página que ao ser clicado dasativa o fullscreen
      closer = document.getElementById("closer");



      /**
      *   Adicionando censor de evento aos elementos que ativam a tela cheia
      */
      trigger.addEventListener("click", function() {
         this.style.width = "100%";
         enterFullScreen(elem, function() {
            if( isFull ) {
               tools.style.display = "block";
            }
         });
      });
      document.getElementById("btn1").addEventListener("click", function() {
         trigger.dispatchEvent(new Event("click"));
      });


      /**
      *   Adicionando censor de evento ao botao que sai da tela cheia
      */
      closer.addEventListener("click", function() {
         trigger.style.width = trigger_w + "px";    //"initial";
         exitFullScreen(elem, function() {
            if( !isFull ) {
               tools.style.display = "none";
            }
         });

      });



      /**
      *  Entra em tela cheia
      */
      enterFullScreen = function(element,callBack) {

         isFull = false;
         method = null;

         element.style.position = "absolute";

         if (element.requestFullscreen) {
            element.requestFullscreen();
            isFull = true;
            method = "";
         } else if (element.msRequestFullscreen) {
            element.msRequestFullscreen();
            isFull = true;
            method = "ms";
         } else if (element.mozRequestFullScreen) {
            element.mozRequestFullScreen();
            isFull = true;
            method = "moz";
         } else if (element.webkitRequestFullscreen) {
            element.webkitRequestFullscreen();
            isFull = true;
            method = "webkit";
         }

         if(isFull) {
            if(callBack!=undefined) callBack();
         }

      }


      /**
      *   Sai da tela cheia
      */
      exitFullScreen = function(element, callBack) {

         element.style.position = "initial";

         if(document.exitFullscreen) {
            document.exitFullscreen();
            isFull = false;
         } else if(document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
            isFull = false;
         } else if(document.webkitExitFullscreen) {
            document.webkitExitFullscreen();
            isFull = false;
         }

         if(isFull===false) {
            if(callBack!=undefined) callBack();
         }

      }


      /**
      *  Determina se esta em modo tela cheia ou nao
      */
      isFullScreen = function() {
         return document.fullScreen ||
                document.msFullScreen ||
                document.mozFullScreen ||
                document.webkitIsFullScreen;

      }


      /**
      *  Quando a entrar ou sair da tela cheia
      */
      window.onresize = function() {
         if( !isFullScreen() ) {
            closer.dispatchEvent(new Event("click"));
         }
      }

   }

   </script>

</head>

<body onload="docReady()">

   <div id="container">
      <div id="fullScreenTools" class="botao">
         <input id="closer" class="icon" name="closer" type="button" value="X">
      </div>
      <img id="trigger" src="http://guiaviajarmelhor.com.br/wp-content/uploads/2015/05/Escocia-edimburgo.png" width="20%" alt="">
   </div>

</body>
</html>

Esta é a nossa página completa que utiliza a Fullscreen API do HTML5 para exibir um elemento DIV em modo de tela cheia. Espero que este artigo seja útil e sirva para esclarecer as dúvidas de quem precisa implementar este recurso em seus projetos.

Qualquer dúvida, sugestão ou colaboração, basta entrar em contato através do formulário de contato da home page do nosso site. Até a próxima.

Jorge Rodrigues

Webmaster e desenvolvedor web full-stack. Self-employed na Concepção Web. Técnico em processamento de dados, com especialização em Programação de Computadores, Redes Locais e em Protocolo e Cabeamento Estruturada de Redes Locais pela Universidade Estácio de Sá.

More Posts

Olá, antes de continuar, precisamos que você forneça algumas informações.

Desenvolvido por Concepção Web.