Mostrar contenido en pantalla completa utilizando JavaScript

Algo que no habíamos podido hacer antes con JavaScript es permitir al usuario acceder al modo de pantalla completa simplemente usando JavaScript; tal y como lo hace Flash. Eso ha cambiado con algunos de los navegadores más recientes.

Tuvimos una petición hace unas semanas, cuando el usuario desea mostrar una galería en el modo de pantalla completa, pero no quería usar Flash. El usuario quería llenar toda la pantalla de la computadora no sólo la ventana del navegador.

Nota: el código sólo funciona un par de navegadores (Chrome 15+, Morzilla 10+, Safari 5.1 +) con el tiempo todos los navegadores deberían proveer apoyo de acuerdo a la documentación del W3C.

El Código

Agrega este código en la parte superior de la página de HTML o en un archivo externo de JavaScript, esto alternará el modo de la pantalla a pantalla completa en los navegadores mencionados anteriormente.

<script type="text/javascript">
function alterna_modo_de_pantalla() {
  if ((document.fullScreenElement && document.fullScreenElement !== null) ||    // metodo alternativo
      (!document.mozFullScreen && !document.webkitIsFullScreen)) {               // metodos actuales
    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();
    }
  }
}
</script>

Después de añadir el código todo lo que tenemos que hacer is utilizar la función.

<script type="text/javascript"> alterna_modo_de_pantalla();</script>

Usando la tecla Enter / Return

<script type="text/javascript"> 
document.addEventListener("keydown", function(e) {
  if (e.keyCode == 13) {
    alterna_modo_de_pantalla();
  }
}, false);
</script>

Usando la tecla «ESC» para salir del modo de pantalla completa

<script type="text/javascript"> 
document.addEventListener("keydown", function(e) {
 if (e.keyCode == 27) {
     alterna_modo_de_pantalla();
 }
}, false);
</script>

Usando jQuery

<script type="text/javascript"> 
jQuery(SELECTOR).click(function(){
    alterna_modo_de_pantalla();
});
</script>