javascript - only - Detectando si un navegador está en modo de pantalla completa
javascript fullscreen onload (14)
¿Qué pasa con la determinación de la distancia entre el ancho de la ventana gráfica y el ancho de la resolución, y también para la altura? Si se trata de una pequeña cantidad de píxeles (especialmente para la altura), puede estar en pantalla completa.
Sin embargo, esto nunca será confiable.
¿Hay alguna forma de detectar de manera confiable si un navegador se está ejecutando en modo de pantalla completa? Estoy bastante seguro de que no hay ninguna API de navegador que pueda consultar, pero ¿alguien lo resolvió inspeccionando y comparando ciertas medidas de altura / ancho expuestas por el DOM? Incluso si solo funciona para ciertos navegadores, me interesa saberlo.
Chrome 15, Firefox 10 y Safari 5.1 ahora proporcionan API para activar de forma programática el modo de pantalla completa. El modo de pantalla completa activado de esta manera proporciona eventos para detectar cambios de pantalla completa y pseudo-clases de CSS para diseñar elementos de pantalla completa.
Vea esta publicación del blog hacks.mozilla.org para más detalles.
Derecha. Totalmente tarde en esto ...
A partir del 25 de noviembre de 2014 (hora de redacción), es posible que los elementos soliciten acceso a pantalla completa y, posteriormente, controlen la entrada / salida del modo de pantalla completa.
MDN Explicación aquí: https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode
Explicación directa de David Walsh: http://davidwalsh.name/fullscreen
En Chrome al menos:
onkeydown se puede usar para detectar la tecla F11 que se está presionando para ingresar a pantalla completa. onkeyup se puede usar para detectar la tecla F11 presionada para salir de pantalla completa.
Úselo junto con la comprobación de keyCode == 122
La parte difícil sería decirle a la tecla / keyup que no ejecute su código si el otro simplemente lo hizo.
Esta es la solución a la que he llegado ... Lo escribí como un módulo es6 pero el código debería ser bastante sencillo.
/**
* Created by sam on 9/9/16.
*/
import $ from "jquery"
function isFullScreenWebkit(){
return $("*:-webkit-full-screen").length > 0;
}
function isFullScreenMozilla(){
return $("*:-moz-full-screen").length > 0;
}
function isFullScreenMicrosoft(){
return $("*:-ms-fullscreen").length > 0;
}
function isFullScreen(){
// Fastist way
var result =
document.fullscreenElement ||
document.mozFullScreenElement ||
document.webkitFullscreenElement ||
document.msFullscreenElement;
if(result) return true;
// A fallback
try{
return isFullScreenMicrosoft();
}catch(ex){}
try{
return isFullScreenMozilla();
}catch(ex){}
try{
return isFullScreenWebkit();
}catch(ex){}
console.log("This browser is not supported, sorry!");
return false;
}
window.isFullScreen = isFullScreen;
export default isFullScreen;
Esto funciona para todos los navegadores nuevos:
if (!window.screenTop && !window.screenY) {
alert(''Browser is in fullscreen'');
}
Existe mi variante NO de navegador cruzado:
<!DOCTYPE html>
<html>
<head>
<title>Fullscreen</title>
</head>
<body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
var fullscreen = $(window).height() + 1 >= screen.height;
$(window).on(''resize'', function() {
if (!fullscreen) {
setTimeout(function(heightStamp) {
if (!fullscreen && $(window).height() === heightStamp && heightStamp + 1 >= screen.height) {
fullscreen = true;
$(''body'').prepend( "<div>" + $( window ).height() + " | " + screen.height + " | fullscreen ON</div>" );
}
}, 500, $(window).height());
} else {
setTimeout(function(heightStamp) {
if (fullscreen && $(window).height() === heightStamp && heightStamp + 1 < screen.height) {
fullscreen = false;
$(''body'').prepend( "<div>" + $( window ).height() + " | " + screen.height + " | fullscreen OFF</div>" );
}
}, 500, $(window).height());
}
});
</script>
</body>
</html>
Probado en:
Kubuntu 13.10 :
Se requiere Firefox 27 ( <!DOCTYPE html> , la secuencia de comandos funciona correctamente con monitores duales), Chrome 33, Rekonq - pase
Win 7 :
Firefox 27, Chrome 33, Opera 12, Opera 20, IE 10 - pase
IE <10 - falla
Firefox 3+ proporciona una propiedad no estándar en el objeto de window que informa si el navegador está en modo de pantalla completa o no: window.fullScreen .
Mi solución es:
var fullscreenCount = 0;
var changeHandler = function() {
fullscreenCount ++;
if(fullscreenCount % 2 === 0)
{
console.log(''fullscreen exit'');
}
else
{
console.log(''fullscreened'');
}
}
document.addEventListener("fullscreenchange", changeHandler, false);
document.addEventListener("webkitfullscreenchange", changeHandler, false);
document.addEventListener("mozfullscreenchange", changeHandler, false);
document.addEventListener("MSFullscreenChanges", changeHandler, false);
Opera trata la pantalla completa como un tipo de medio CSS diferente. Lo llaman Opera Show , y puedes controlarlo tú mismo fácilmente:
@media projection {
/* these rules only apply in full screen mode */
}
Combinado con Opera@USB , personalmente lo he encontrado extremadamente útil.
Para Safari en iOS puede usar:
if (window.navigator.standalone) {
alert("Full Screen");
}
Puede verificar si document.fullscreenElement no es nulo para determinar si el modo de pantalla completa está activado. Necesitará el prefijo del proveedor en fullscreenElement consecuencia. Yo usaría algo como esto:
var fullscreenElement = document.fullscreenElement || document.mozFullScreenElement ||
document.webkitFullscreenElement || document.msFullscreenElement;
https://msdn.microsoft.com/en-us/library/dn312066(v=vs.85).aspx tiene un buen ejemplo para esto que cito a continuación:
document.addEventListener("fullscreenChange", function () {
if (fullscreenElement != null) {
console.info("Went full screen");
} else {
console.info("Exited full screen");
}
});
Solo pensé en agregar mi Thruppence para salvar a cualquiera golpeando sus cabezas. La primera respuesta es excelente si tiene control total sobre el proceso, es decir, inicia el proceso de pantalla completa en el código. Inútil si alguien lo hace esto al presionar F11.
El rayo de esperanza en el horizonte viene en la forma de esta recomendación W3C http://www.w3.org/TR/view-mode/ que permitirá la detección de ventanas, flotantes (sin cromo), maximizadas, minimizadas y a pantalla completa a través de consultas de medios (que por supuesto significa window.matchMedia y asociado).
He visto indicios de que está en el proceso de implementación con los prefijos -webkit y -moz pero aún no parece estar en producción.
Así que no, no hay soluciones, pero con suerte voy a salvar a alguien corriendo mucho antes de llegar a la misma pared.
PD *: - moz-full-screen también hace doo-dah, pero es bueno saberlo.
Usuario window.innerHeight y screen.availHeight . También los anchos
window.onresize = function(event) {
if (window.outerWidth === screen.availWidth && window.outerHeight === screen.availHeight) {
console.log("This is your MOMENT of fullscreen: " + Date());
}