Gibt es eine Möglichkeit, zuverlässig festzustellen, ob ein Browser im Vollbildmodus ausgeführt wird? Ich bin mir ziemlich sicher, dass es keine Browser-API gibt, die ich abfragen kann, aber hat jemand es durch das Untersuchen und Vergleichen bestimmter Höhe/Breite-Messungen, die von dem DOM ausgesetzt sind, herausgefunden? Auch wenn es nur für bestimmte Browser funktioniert, interessiert mich das.Erkennen, ob sich ein Browser im Vollbildmodus befindet
Was ist mit der Bestimmung der Abstand zwischen der Breite des Ansichtsfensters und der Auflösung und ebenfalls für die Höhe. Wenn es eine kleine Anzahl von Pixeln ist (besonders für die Höhe), kann es auf Vollbild sein.
Dies wird jedoch nie zuverlässig sein.
Wenn der Browser tatsächlich Vollbildmodus ausführt, sollte der Unterschied zwischen der Größe des Darstellungsbereichs und der Auflösung gleich 0 sein. Es sei denn, Sie führen mehrere Monitore aus. –
Werden Bildlaufleisten als Teil des Ansichtsfensters gezählt? –
Ich bin mir nicht sicher - Sie müssen experimentieren. – alex
Opera behandelt Vollbild als einen anderen CSS-Medientyp. Sie nennen es Opera Show, und Sie können es sich einfach steuern:
@media projection {
/* these rules only apply in full screen mode */
}
In Kombination mit [email protected], ich habe persönlich fand es sehr praktisch. Diese
funktioniert für alle neuen Browser:
if (!window.screenTop && !window.screenY) {
alert('Browser is in fullscreen');
}
Leider ist dieser Test unzuverlässig geworden. –
Dies scheint zu funktionieren: if (screen.height === window.outerHeight) { alert ('Browser ist im Vollbild'); } –
Nein, die zweite Lösung funktioniert nicht in Chrome 23, wenn Vollbild über API aktiviert ist, aber der Benutzer schaltet es mit Strg + Alt + F aus. – Ruben
Chrome 15, Firefox 10 und Safari 5.1 jetzt APIs bieten programmatisch Vollbild-Modus auslösen. Der Vollbildmodus, der auf diese Weise ausgelöst wird, bietet Ereignisse zum Erkennen von Vollbildänderungen und CSS-Pseudoklassen zum Formatieren von Vollbildelementen.
Weitere Informationen finden Sie unter this hacks.mozilla.org blog post.
Gibt es noch eine Möglichkeit, den vom Benutzer eingegebenen Vollbildmodus mithilfe der vom Browser bereitgestellten Mittel (wie F11 oder Menü neben Zoom in Chrome) zu erkennen? – Suma
Firefox 3+ bietet eine nicht standardmäßige Eigenschaft für das Objekt window, das meldet, ob sich der Browser im Vollbildmodus befindet oder nicht: window.fullScreen.
Schön! Dies funktioniert in Firefox zuverlässig. Dies ist definitiv ein Teil der Lösung. –
Für Safari auf iOS verwenden können:
if (window.navigator.standalone) {
alert("Full Screen");
}
In Chrome mindestens:
onkeydown verwendet werden kann, die F11-Taste zu erkennen, Vollbild-Eingabe gedrückt wird. onkeyup kann verwendet werden, um zu erkennen, dass die Taste F11 gedrückt wird, um den Vollbildmodus zu beenden.
verwenden, die in Verbindung mit der Überprüfung für keyCode == 122
Der schwierige Teil der keydown zu sagen, wäre/keyUp nicht seinen Code auszuführen, wenn der andere gerade tat.
Dies hilft nicht, wenn der Benutzer Vollbild mit F11 eingab, bevor er zu der Webseite navigierte, auf der das Javascript lief. –
Es ist nicht meine Cross-Browser-Variante:
<!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>
Getestet auf:
Kubuntu 13.10:
27 Firefox (<!DOCTYPE html> erforderlich ist, arbeitet Skript korrekt mit Dual-Monitore), 33 Chrome, Rekonq - pass
Win 7:
27 Firefox, 33 Chrome, Opera 12, 20 Opera, IE 10 - pass
IE < 10 - Fehler
Rechts. Totally spät auf diesem ...
Ab dem 25. November 2014 (Zeitpunkt des Schreibens), ist es für Elemente möglich, Vollbild-Zugriff anzufordern, und steuern anschließend Eingabe/Verlassen Vollbild-Modus.
MDN Erläuterung hier: https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode
Einfache Erklärung von David Walsh: http://davidwalsh.name/fullscreen
dachte, ich würde meine thruppence hinzufügen jemand zu retten ihre Köpfe hämmern. Die erste Antwort ist ausgezeichnet, wenn Sie die vollständige Kontrolle über den Prozess haben, dh Sie initiieren den Vollbildprozess im Code. Nutzlos sollte es jemand tun, indem er F11 drückt.
Der Hoffnungsschimmer am Horizont kommt in Form dieser W3C Empfehlung http://www.w3.org/TR/view-mode/, die die Erkennung von gefensterten, schwebenden (ohne Chrom), maximierten, minimierten und Vollbild über Medienabfragen ermöglicht (was natürlich window.matchMedia und damit verbundenen).
Ich habe Zeichen gesehen, dass es in der Implementierung mit -webkit und -moz Präfixe ist, aber es scheint nicht in Produktion zu sein.
Also nein, keine Lösungen, aber hoffentlich werde ich jemanden retten, der viel herumrennt, bevor er die selbe Wand trifft.
PS *: - Moz-Vollbild tut auch Doo-dah, aber nett zu wissen.
Meine Lösung ist:
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);
Benutzer window.innerHeight und screen.availHeight. Auch die Breiten.
window.onresize = function(event) {
if (window.outerWidth === screen.availWidth && window.outerHeight === screen.availHeight) {
console.log("This is your MOMENT of fullscreen: " + Date());
}
Sie können überprüfen, ob document.fullscreenElement nicht null ist, um zu bestimmen, ob Vollbild-Modus eingeschaltet ist. Sie müssen das Lieferantenpräfix fullscreenElement entsprechend angeben. Ich würde so etwas wie folgt verwenden:
var fullscreenElement = document.fullscreenElement || document.mozFullScreenElement ||
document.webkitFullscreenElement || document.msFullscreenElement;
https://msdn.microsoft.com/en-us/library/dn312066(v=vs.85).aspx hat ein gutes Beispiel dafür, das ich unten zitieren:
document.addEventListener("fullscreenChange", function() {
if (fullscreenElement != null) {
console.info("Went full screen");
} else {
console.info("Exited full screen");
}
});
Dies ist die Lösung, die ich gekommen bin zu ... ich es geschrieben habe als ES6-Modul, aber der Code sollte ziemlich einfach sein.
/**
* 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;
Warum müssen Sie dies erkennen? Vielleicht gibt es eine andere Lösung für Ihr Problem? – Marc
Wenn sich der Browser im Vollbildmodus befindet, gibt es keine Möglichkeit, die vom Betriebssystem gemeldete Uhrzeit anzuzeigen (z. B. in der Uhr im Infobereich der Taskleiste unter Windows).Die Möglichkeit, die aktuelle Zeit zu sehen, kann für Benutzer unserer Webanwendung wichtig sein. Daher möchten wir in der Lage sein, eine Uhr anzuzeigen, wenn der Browser vollständig gescreent ist. Die Bildschirmgröße ist sehr hoch, wenn unsere Anwendung mit niedrigeren Auflösungen wie 1024 * 768 läuft. Daher möchten wir die Uhr nur dann anzeigen, wenn der Browser, wenn überhaupt, vollständig gescreent ist. –
Was ist, wenn sie normalerweise keine Uhr auf ihrem Desktop haben und ihren Browser nicht vollständig anzeigen? Sind Sie sicher, dass Sie derjenige sind, der dafür verantwortlich ist, dass er die aktuelle Zeit kennt? –