Wie man das Fenster mit Javascript bildschirmfüllend macht (dehnt sich über den gesamten Bildschirm aus)

Wie kann ich den Browser eines Besuchers mithilfe von JavaScript auf den Vollbildmodus umschalten, so dass dies mit IE, Firefox und Opera funktioniert?

In neueren Browsern wie Chrome 15, Firefox 10, Safari 5.1, IE 10 ist dies möglich. Es ist auch für ältere IEs über ActiveX möglich, abhängig von deren Browsereinstellungen.

So geht’s:

function requestFullScreen(element) {
    // Supports most browsers and their versions.
    var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen;

    if (requestMethod) { // Native full screen.
        requestMethod.call(element);
    } else if (typeof window.ActiveXObject !== "undefined") { // Older IE.
        var wscript = new ActiveXObject("WScript.Shell");
        if (wscript !== null) {
            wscript.SendKeys("{F11}");
        }
    }
}

var elem = document.body; // Make the body go full screen.
requestFullScreen(elem);

Der Benutzer muss natürlich zuerst die Vollbildanforderung akzeptieren, und es ist nicht möglich, dies automatisch beim Laden der Seite auszulösen, es muss von einem Benutzer ausgelöst werden (z. B. eine Schaltfläche).

Weiterlesen: https://developer.mozilla.org/en/DOM/Using_full-screen_mode

Dieser Code enthält auch, wie man den Vollbildmodus für Internet Explorer 9 und wahrscheinlich ältere Versionen sowie sehr aktuelle Versionen von Google Chrome aktiviert. Die akzeptierte Antwort kann auch für andere Browser verwendet werden.

var el = document.documentElement
    , rfs = // for newer Webkit and Firefox
           el.requestFullscreen
        || el.webkitRequestFullScreen
        || el.mozRequestFullScreen
        || el.msRequestFullscreen
;
if(typeof rfs!="undefined" && rfs){
  rfs.call(el);
} else if(typeof window.ActiveXObject!="undefined"){
  // for Internet Explorer
  var wscript = new ActiveXObject("WScript.Shell");
  if (wscript!=null) {
     wscript.SendKeys("{F11}");
  }
}

Quellen:

• Chrome Fullscreen API (beachten Sie jedoch, dass
  requestFullscreen “funktioniert nur während” “[m]ost UIEvents und MouseEvents, wie Click und Keydown, etc.”, “damit es nicht böswillig verwendet werden kann”.)
• So stellen Sie den Browser mit dem F11-Tastenereignis über JavaScript in den Vollbildmodus

Dies ist so nah wie möglich an den Vollbildmodus in JavaScript:

<script type="text/javascript">
    window.onload = maxWindow;

    function maxWindow() {
        window.moveTo(0, 0);

        if (document.all) {
            top.window.resizeTo(screen.availWidth, screen.availHeight);
        }

        else if (document.layers || document.getElementById) {
            if (top.window.outerHeight < screen.availHeight || top.window.outerWidth < screen.availWidth) {
                top.window.outerHeight = screen.availHeight;
                top.window.outerWidth = screen.availWidth;
            }
        }
    }
</script> 

Hier ist eine vollständige Lösung zum Ein- und Aussteigen aus dem Vollbildmodus (auch bekannt als Abbrechen, Beenden, Escape).

        function cancelFullScreen() {
            var el = document;
            var requestMethod = el.cancelFullScreen||el.webkitCancelFullScreen||el.mozCancelFullScreen||el.exitFullscreen||el.webkitExitFullscreen;
            if (requestMethod) { // cancel full screen.
                requestMethod.call(el);
            } else if (typeof window.ActiveXObject !== "undefined") { // Older IE.
                var wscript = new ActiveXObject("WScript.Shell");
                if (wscript !== null) {
                    wscript.SendKeys("{F11}");
                }
            }
        }

        function requestFullScreen(el) {
            // Supports most browsers and their versions.
            var requestMethod = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullscreen;

            if (requestMethod) { // Native full screen.
                requestMethod.call(el);
            } else if (typeof window.ActiveXObject !== "undefined") { // Older IE.
                var wscript = new ActiveXObject("WScript.Shell");
                if (wscript !== null) {
                    wscript.SendKeys("{F11}");
                }
            }
            return false
        }

        function toggleFullScreen(el) {
            if (!el) {
                el = document.body; // Make the body go full screen.
            }
            var isInFullScreen = (document.fullScreenElement && document.fullScreenElement !== null) ||  (document.mozFullScreen || document.webkitIsFullScreen);

            if (isInFullScreen) {
                cancelFullScreen();
            } else {
                requestFullScreen(el);
            }
            return false;
        }

Sie können verwenden Die Vollbild-API
Du kannst sehen ein Beispiel hier

Die Vollbild-API bietet eine einfache Möglichkeit, Webinhalte über den gesamten Bildschirm des Benutzers darzustellen. Dieser Artikel enthält Informationen zur Verwendung dieser API.

Die neue html5-Technologie – Die Fullscreen-API bietet uns eine einfache Möglichkeit, den Inhalt einer Webseite im Vollbildmodus darzustellen. Wir werden Ihnen gleich detaillierte Informationen zum Vollbildmodus geben. Versuchen Sie sich einfach alle möglichen Vorteile vorzustellen, die Sie mit dieser Technologie erzielen können – Vollbild-Fotoalben, Videos und sogar Spiele.

Aber bevor wir diese neue Technologie beschreiben, muss ich anmerken, dass diese Technologie experimentell ist und von allen gängigen Browsern unterstützt.

Das vollständige Tutorial finden Sie hier: http://www.css-jquery-design.com/2013/11/javascript-jquery-fullscreen-browser-window-html5-technology/

Hier ist eine funktionierende Demo: http://demo.web3designs.com/javascript-jquery-fullscreen-browser-window-html5-technology.htm

Einfaches Beispiel aus: http://www.longtailvideo.com/blog/26517/using-the-browsers-new-html5-fullscreen-capabilities/

<script type="text/javascript">
  function goFullscreen(id) {
    // Get the element that we want to take into fullscreen mode
    var element = document.getElementById(id);

    // These function will not exist in the browsers that don't support fullscreen mode yet, 
    // so we'll have to check to see if they're available before calling them.

    if (element.mozRequestFullScreen) {
      // This is how to go into fullscren mode in Firefox
      // Note the "moz" prefix, which is short for Mozilla.
      element.mozRequestFullScreen();
    } else if (element.webkitRequestFullScreen) {
      // This is how to go into fullscreen mode in Chrome and Safari
      // Both of those browsers are based on the Webkit project, hence the same prefix.
      element.webkitRequestFullScreen();
   }
   // Hooray, now we're in fullscreen mode!
  }
</script>

<img class="video_player" src="https://stackoverflow.com/questions/1125084/image.jpg" id="player"></img>
<button onclick="goFullscreen('player'); return false">Click Me To Go Fullscreen! (For real)</button>