Using the Fullscreen API example.

Já faz algum tempo, desde o fim de 2011, que existe um draft publicado no World Wide Web Consortium (W3C) pelo pessoal do Web Hypertext Application Technology Community Group (WHATCG) buscando padronizar uma API Javascript para exibição de conteúdo em tela cheia nos navegadores web. A especificação está em um processo chamado living specification, algo como uma especificação em andamento, e vem sofrendo modificações desde então. A última atualização data de julho de 2012 e de lá pra cá vários navegadores já a implementaram. Segue uma abaixo uma tabela de compatibilidade.

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	15 -webkit	9.0 (9.0) -moz	11 -ms	12.10	5.0 -webkit
fullscreenEnabled	20 -webkit	10.0 (10.0) -moz	11 -ms	12.10	5.1 -webkit

Estamos no início de 2014 e, apenas para exemplificar, o Firefox estável está na versão 27, ou seja, já faz tempo que a API vem sendo utilizada e se encontra bastante sólida, mesmo não sendo oficialmente um padrão W3C.

Como utilizar?

Utilizar a Fullscreen API é simples, todavia ainda se faz necessário certo boilerplate para garantir a compatibilidade entre os navegadores. Espera-se, que depois de se tornar um padrão consolidado, os navegadores a implementem com interfaces idênticas.

function toggleFullScreen(element) {
  // se não está em tela cheia
  if (!element.fullscreenElement &&        // método padrão
      !element.mozFullScreenElement &&     // método Mozilla
      !element.webkitFullscreenElement &&  // método Chrome e Safari
      !element.msFullscreenElement ) {     // método Internet Explorer
    
    // solicitar tela cheia
    if (element.documentElement.requestFullscreen) {               // método padrão
      element.documentElement.requestFullscreen();
    } else if (element.documentElement.mozRequestFullScreen) {     // método Mozilla
      element.documentElement.mozRequestFullScreen();
    } else if (element.documentElement.webkitRequestFullscreen) {  // método Chrome e Safari
      element.documentElement.webkitRequestFullscreen();
    } else if (element.documentElement.msRequestFullscreen) {      // método Internet Explorer
      element.documentElement.msRequestFullscreen();
    }
  } else { // cancelar tela cheia
    if (element.exitFullscreen) {              // método padrão
      element.exitFullscreen();
    } else if (element.mozCancelFullScreen) {  // método Mozilla
      element.mozCancelFullScreen();      
    } else if (element.webkitExitFullscreen) { // método Chrome e Safari
      element.webkitExitFullscreen();      
    } else if (element.msExitFullscreen) {     // método Internet Explorer
      element.msExitFullscreen();
    }
  }
}

Note que atualmente os métodos são prefixados com uma string identificando a implementação do navegador. Para que um determinado elemento fiquei em tela cheia, basta chamar toggleFullScreen passando tal elemento como parâmetro.

var divElement = document.getElementById('divFoo');
var imgElement = document.getElementById('imgBar');

var btnFoo = document.getElementById("btnFoo");
btnFoo.addEventListener("click", function() {
  toggleFullScreen(divElement);
}, false);

var btnBar = document.getElementById("btnBar");
btnBar.addEventListener("click", function() {
  toggleFullScreen(imgElement);
}, false);

No código acima, dois botões que fazem uso de toggleFullScreen para solicitar tela cheia para dois elementos distintos, um div (divFoo) e uma imagem (imgBar). Segue, por fim, o HTML com os elementos e os botões.

<div id="divFoo">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras consectetur accumsan nibh a ullamcorper. Nam porttitor sit amet tellus non consectetur. Aenean tincidunt erat mauris.
</div>
<div style="margin: 50px;"></div>
<img id="imgBar" src="http://www.w3.org/2008/site/images/logo-w3c-mobile-lg">
<div style="margin: 50px;"></div>

<button id="btnFoo">Div em tela cheia</button> <button id="btnBar">Imagem em tela cheia</button>

Para visualizar o código em funcionamento clique aqui.

brunoric/javascript-fullscreen-api.post.md

Como utilizar?

Referências