Cómo salir de una aplicación web de pantalla completa

Estamos intentando que nuestra aplicación web funcione como una aplicación web de pantalla completa. Conseguí esto trabajar usando estas etiquetas del meta:

<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="default"> <meta name="apple-mobile-web-app-title" content="Full Screen">

Así que ahora cuando lanzas la aplicación web desde tu pantalla de inicio en iPhone o dispositivos Android, se iniciará en pantalla completa (sin controles de navegador).

Ahora necesitamos una manera de permitir que el usuario salga, yo estaba esperando para crear un menú que tenía un botón de salir, pero utilizando window.close () me da el siguiente error en cromo:

 Scripts may close only the windows that were opened by it.

¿Cuál sería la manera correcta de manejar esto?

Una manera de cerrar un modo de pantalla completa es utilizar el siguiente script:

  function exitFullScreen(element) { var requestMethod = element.exitFullscreen || element.mozCancelFullScreen || element.webkitExitFullscreen || element.msExitFullscreen; if (requestMethod) { requestMethod.call(element); } else { console.log("Oops. Request method false."); } }

Y luego lo llaman así:

  var $smallscreenButton = $("#smallscreen-button"); $smallscreenButton.on("click", function() { var elem = document; exitFullScreen(elem); });

El error phased con window.close () es que debes haber abierto la ventana dentro del mismo javascript con window.open () y entonces debería haber cerrado correctamente. Usted apenas no puede cerrar ventanas al azar con javascript, ése es porqué usted no puede llamar cerca sin la abertura primero.

Así que, algo así:

  var myWindow = window.open(); myWindow.close(); // this works.

Fuentes:

[1] ¿Cómo podemos entrar y salir programáticamente del modo de pantalla completa en javascript?

[2] window.close () no funciona – Los scripts pueden cerrar sólo las ventanas que fueron abiertas por ella

Aquí hay un buen tutorial sobre cómo usar HTML5 fullscreen api

A partir de ahí, para salir Pantalla completa:

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

Puede escribir el código anterior en el método de clic de cualquier elemento DOM como, digamos usando jquery:

 $("#exitFullScreen").click(function(){ // the above code if (document.exitFullscreen) { document.exitFullscreen(); } else if (document.webkitExitFullscreen) { document.webkitExitFullscreen(); } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if (document.msExitFullscreen) { document.msExitFullscreen(); } });

Otras referencias: