Browser mittels JavaScript in den Vollbildmodus versetzen
Das unten stehende JS-Snippet versetzt den Browser in den Vollbildmodus und funktioniert in allen gängigen Browsern (Mozilla Firefox, Google Chrome, Microsoft Internet Explorer, Apple Safari)
Achtung: Apple Safari wird nur unter Mac OS unterstützt, denn unter iOS erlaubt Apple für Websites generell keinen Vollbildmodus.
JavaScript-Code
function fullscreen(){
elem = document.getElementsByTagName("body")[0];
if (!document.fullscreenElement && !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement){
if(elem.requestFullscreen){
elem.requestFullscreen();
} else if(elem.msRequestFullscreen){
elem.msRequestFullscreen();
} else if(elem.mozRequestFullScreen){
elem.mozRequestFullScreen();
} else if(elem.webkitRequestFullscreen){
elem.webkitRequestFullscreen(elem.ALLOW_KEYBOARD_INPUT);
}
} else {
if(document.exitFullscreen){
document.exitFullscreen();
} else if(document.msExitFullscreen){
document.msExitFullscreen();
} else if(document.mozCancelFullScreen){
document.mozCancelFullScreen();
} else if(document.webkitExitFullscreen){
document.webkitExitFullscreen();
}
}
}
Einschränkungen
Bei der Entwicklung von Websites, die im Vollbildmodus angezeigt werden sollen, sind die folgenden beiden Dinge zu beachten:
- Der Wechsel in den Fullscreen-Modus kann nur durch ein Click-Event ausgelöst werden, ein direkter Aufruf der Funktion beim Laden der Website wird von den Browsern ignoriert.
- Die Browser ignorieren bei der Anzeige der Website teilweise CSS-Styles die dem <body>-Tag zugewiesen wurden. So fehlen im Internet-Explorer margins und paddings, Google Chrome und Firefox ignorieren sämtliche Definitionen zur Hintergrundfarbe und färben diesen stets Weiß bzw. Schwarz ein.
Der letzte Punkt lässt sich am einfachsten beheben in dem ein umschließender <div>-Container um den gesamten Inhalt gelegt wird und sämtliche Stile die eigentlich dem <body>-Tag zugewiesen werden diesem zugewiesen werden.
Hallo,
in deinem script ist ne kleine Macke:
Klicke ich oben rechts auf 'kopieren', wird das Wort 'elem' mit dem -Tag versehen:
elem.webkitRequestFullscreen(elem.ALLOW_KEYBOARD_INPUT);
Bei copy 'n paste wird das schnell übersehen und das Script läuft dann nicht!
Du soltest das -Tag hier rausnehmen.
Das Script läuft im Übrigen sehr gut!