blog.bartlweb - a technologist's external brain

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.

Dieser Artikel hat Dir deinen Tag gerettet?

... und mühevolles Probieren, Recherchieren und damit Stunden an Zeit gespart? Oder einfach nur Dein Problem gelöst?

Dann würde ich mich freuen, wenn Du meine Zeit für die Erstellung dieses Blogartikels mit einer kleinen Anerkennung honorierst:

Zahlung mit PayPal oder Kreditkarte.

Hinweis zur Verwendung

Die Übermittlung einer Zahlung ist eine persönliche Anerkennung Ihrerseits an den Entwickler (Christian Bartl, Privatperson). Eine Zahlung ist nicht zweckgebunden und es ist keine Gegenleistung zu erwarten. Bitte beachten Sie, dass für eine übermittelte Zahlung keine Quittung ausgestellt werden kann.

Über den Autor

Christian Bartl

Christian Bartl Requirements Engineer
& Solution Architect für Online und Mobile

Als Technologie-Enthusiast und begeisterter Programmierer entwickle ich in meiner Freizeit Websites, Software und IT-Lösungen, die mir selbst und anderen den Alltag vereinfachen.

mehr auf christian.bartl.me

Kommentare

  1. 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!

    kommentieren

    1. Hallo,
      herzlichen Dank für den Hinweis, ich habe den Artikel eben entsprechend angepasst.
      lg Christian

      kommentieren

  2. Hallo Christian,
    gutes Script und gut erklärt!
    Mit einem input-Button und einem onclick-Funktionsaufruf klappt es auf dem PC und unter Android prima.
    Leider bekomme ich es in keinem Browser auf einem iPhone zum laufen.
    LG
    Peter

    kommentieren

    1. Hallo Peter,
      Apple erlaubt im Safari unter iOS keinen Vollbildmodus und nachdem, wie sollte es anders sein, alle Browser unter iOS auf der Safari-Engine aufsetzen müssen, funktioniert damit der Vollbildmodus leider konsequenterweise auch in keinem einzigen Browser unter iOS.
      lg Christian

      kommentieren

      1. Hallo Christian,
        Danke für Deine Antwort!
        Das erspart mir viel Zeit, weil ich nun nicht mehr herumexperimentieren brauche! ;-)
        LG
        Peter

        kommentieren

      2. Hallo Christian,
        noch 'ne kleine Ergänzung:
        Im ersten Absatz Deiner Seite wird unter den genannten funktionierenden Browsern am Ende auch 'Apple Safari' genannt. Evtl. sollte der dann hier nicht erwähnt werden?
        LG
        Peter

        kommentieren

        1. Hallo Peter,
          danke für den Hinweis, habe die Information eben im Artikel ergänzt.
          lg Christian

          kommentieren

Kommentar schreiben

Der hier angegebene Name wird gemeinsam mit deinem Kommentar auf der Website veröffentlicht.

Deine E-Mail-Adresse wird zur einmaligen Benachrichtigung bei Veröffentlichung des Kommentars genutzt.

Benachrichtigung per E-Mail über Antworten auf meinen Kommentar erhalten.

Bitte tippe die Zahlenkombination "5785" ein, nur dann kann ich deinen Kommentar entgegennehmen.

Bitte fülle dieses Feld nicht aus, nur dann kann ich deinen Kommentar entgegennehmen.