pantalla - javascript fullscreen f11
API de pantalla completa de Chrome (5)
Según este artículo, Google Chrome 15 tiene una API de pantalla completa de JavaScript.
Intenté hacerlo funcionar pero fallé. También busqué documentación oficial en vano.
¿Cómo se ve la API de JavaScript a pantalla completa?
Aquí hay algunas funciones que he creado para trabajar con pantalla completa en el navegador.
Proporcionan pantalla completa de entrada / salida en la mayoría de los principales navegadores.
function isFullScreen()
{
return (document.fullScreenElement && document.fullScreenElement !== null)
|| document.mozFullScreen
|| document.webkitIsFullScreen;
}
function requestFullScreen(element)
{
if (element.requestFullscreen)
element.requestFullscreen();
else if (element.msRequestFullscreen)
element.msRequestFullscreen();
else if (element.mozRequestFullScreen)
element.mozRequestFullScreen();
else if (element.webkitRequestFullscreen)
element.webkitRequestFullscreen();
}
function exitFullScreen()
{
if (document.exitFullscreen)
document.exitFullscreen();
else if (document.msExitFullscreen)
document.msExitFullscreen();
else if (document.mozCancelFullScreen)
document.mozCancelFullScreen();
else if (document.webkitExitFullscreen)
document.webkitExitFullscreen();
}
function toggleFullScreen(element)
{
if (isFullScreen())
exitFullScreen();
else
requestFullScreen(element || document.documentElement);
}
En el proyecto de la biblioteca de cierre de Google, hay un módulo que hace el trabajo, a continuación se muestra la API y el código fuente.
Hice un contenedor simple para la API de pantalla completa, llamado screenfull.js , para suavizar el lío del prefijo y corregir algunas incoherencias en las diferentes implementaciones. Mira la demo para ver cómo funciona la API de pantalla completa.
Lectura recomendada:
La API solo funciona durante la interacción del usuario, por lo que no se puede usar de forma malintencionada. Pruebe el siguiente código:
addEventListener("click", function() {
var el = document.documentElement,
rfs = el.requestFullscreen
|| el.webkitRequestFullScreen
|| el.mozRequestFullScreen
|| el.msRequestFullscreen
;
rfs.call(el);
});
La siguiente prueba funciona en Chrome 16 (rama de desarrollo) en X86 y Chrome 15 en Mac OSX Lion