So machen Sie das Fenster mit Javascript zum Vollbild (über den gesamten Bildschirm)

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

Dies ist so nah wie möglich am 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> 

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

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, diese beim Seitenladen automatisch auszulösen. Sie muss von einem Benutzer (z. B. einer Schaltfläche) ausgelöst werden.

Lesen Sie mehr: https://developer.mozilla.org/en/DOM/Using_full-screen_mode

Dieser Code enthält auch Informationen zum Aktivieren des Vollbildmodus für Internet Explorer 9 und möglicherweise ältere Versionen sowie für neuere Versionen von Google Chrome. 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-Vollbild-API (Beachten Sie jedoch, dass requestFullscreen"nur während" "[m] ost UIEvents und MouseEvents wie Klicken und Keydown usw." funktioniert, "daher kann es nicht böswillig verwendet werden".)
• So machen Sie den Browser mit dem F11-Schlüsselereignis über JavaScript zum Vollbild

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

        function cancelFullScreen(el) {
            var requestMethod = el.cancelFullScreen||el.webkitCancelFullScreen||el.mozCancelFullScreen||el.exitFullscreen;
            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 toggleFull() {
            var elem = document.body; // Make the body go full screen.
            var isInFullScreen = (document.fullScreenElement && document.fullScreenElement !== null) ||  (document.mozFullScreen || document.webkitIsFullScreen);

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

Sie können die Vollbild-API verwenden. Hier sehen Sie ein Beispiel

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

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

Bevor wir diese neue Technologie beschreiben, muss ich jedoch beachten, dass diese Technologie experimentell ist und von allen wichtigen Browsern unterstützt wird .

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

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

Ich habe das benutzt ...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>
    <script language="JavaScript">
        function fullScreen(theURL) {
            window.open(theURL, '', 'fullscreen=yes, scrollbars=auto');
        }
        // End -->
    </script>
</head>

<body>
    <h1 style="text-align: center;">
        Open In Full Screen
    </h1>
    <div style="text-align: center;"><br>
        <a href="javascript:void(0);" onclick="fullScreen('http://google.com');">
            Open Full Screen Window
        </a>
    </div>
</body>

</html>

Einfaches Beispiel von: 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="image.jpg" id="player"></img>
<button onclick="goFullscreen('player'); return false">Click Me To Go Fullscreen! (For real)</button>

Funktion erstellen

function toggleFullScreen() {

            if ((document.fullScreenElement && document.fullScreenElement !== null) ||
                    (!document.mozFullScreen && !document.webkitIsFullScreen)) {
             $scope.topMenuData.showSmall = true;
                if (document.documentElement.requestFullScreen) {
                    document.documentElement.requestFullScreen();
                } else if (document.documentElement.mozRequestFullScreen) {
                    document.documentElement.mozRequestFullScreen();
                } else if (document.documentElement.webkitRequestFullScreen) {
                    document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
                }
            } else {

                  $scope.topMenuData.showSmall = false;
                if (document.cancelFullScreen) {
                    document.cancelFullScreen();
                } else if (document.mozCancelFullScreen) {
                    document.mozCancelFullScreen();
                } else if (document.webkitCancelFullScreen) {
                    document.webkitCancelFullScreen();
                }
            }
        }

In HTML Code wie einfügen

<ul class="unstyled-list fg-white">

            <li class="place-right" data-ng-if="!topMenuData.showSmall" data-ng-click="toggleFullScreen()">Full Screen</li>
            <li class="place-right" data-ng-if="topMenuData.showSmall" data-ng-click="toggleFullScreen()">Back</li>
        </ul>

Jetzt, da die Vollbild-APIs weiter verbreitet sind und zu reifen scheinen, können Sie Screenfull.js ausprobieren . Ich habe es gestern zum ersten Mal benutzt und heute läuft unsere App in (fast) allen Browsern wirklich im Vollbildmodus!

Stellen Sie sicher, dass Sie es mit der :fullscreenPseudoklasse in CSS koppeln . Weitere Informationen finden Sie unter https://www.sitepoint.com/use-html5-full-screen-api/ .

Glücklicherweise kann dies für ahnungslose Webbenutzer nicht nur mit Javascript durchgeführt werden. Sie müssten browserspezifische Plugins schreiben, falls diese noch nicht vorhanden sind, und dann die Leute dazu bringen, sie herunterzuladen. Das nächstgelegene Fenster ist ein maximiertes Fenster ohne Werkzeug oder Navigationsleisten, aber die Benutzer können die URL weiterhin sehen.

window.open('http://www.web-page.com', 'title' , 'type=fullWindow, fullscreen, scrollbars=yes');">

Dies wird im Allgemeinen als schlechte Praxis angesehen, da dem Benutzer viele Browserfunktionen entzogen werden.

Versuchen Sie screenfull.js . Es ist eine nette Cross-Browser-Lösung, die auch für den Opera-Browser funktionieren sollte.

Einfacher Wrapper für die browserübergreifende Verwendung der JavaScript-Vollbild-API, mit der Sie die Seite oder ein beliebiges Element in den Vollbildmodus bringen können. Glättet die Unterschiede bei der Browserimplementierung, sodass Sie dies nicht tun müssen.

Demo .

Dies kann unterstützen

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default5.aspx.cs" Inherits="PRODUCTION_Default5" %>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
        <title>Untitled Page</title>
        <script type="text/javascript">
            function max()
            {
               window.open("", "_self", "fullscreen=yes, scrollbars=auto"); 
            }
        </script>
    </head>
    <body onload="max()">
        <form id="form1" runat="server">
        <div>
        This is Test Page
        </div>
        </form>
    </body>
    </html>

Kannst du es versuchen:

<script type="text/javascript">
    function go_full_screen(){
      var elem = document.documentElement;
      if (elem.requestFullscreen) {
        elem.requestFullscreen();
      } else if (elem.msRequestFullscreen) {
        elem.msRequestFullscreen();
      } else if (elem.mozRequestFullScreen) {
        elem.mozRequestFullScreen();
      } else if (elem.webkitRequestFullscreen) {
        elem.webkitRequestFullscreen();
      }
    }
</script>

<a href="#" onClick="go_full_screen();">Full Screen / Compress Screen</a>

Versuchen Sie dieses Skript

<script language="JavaScript">
function fullScreen(theURL) {
window.open(theURL, '', 'fullscreen=yes, scrollbars=auto' );
}
</script>

Verwenden Sie zum Aufrufen aus dem Skript diesen Code:

window.fullScreen('fullscreen.jsp');

oder mit Hyperlink verwenden Sie diese

<a href="javascript:void(0);" onclick="fullScreen('fullscreen.jsp');"> 
Open in Full Screen Window</a>

In Firefox 10 können Sie die aktuelle Seite mit diesem Javascript in den Vollbildmodus (echten Vollbildmodus ohne Fensterchrom) versetzen:

window.fullScreen = true;

Dadurch wird Ihr Fenster im Vollbildmodus angezeigt

Hinweis: Damit dies funktioniert, benötigen Sie eine Abfrage von http://code.jquery.com/jquery-2.1.1.min.js

Oder machen Sie einen Javascript-Link wie diesen.

<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>

   <div id="demo-element">
        <span>Full Screen Mode Disabled</span>
        <button id="go-button">Enable Full Screen</button>
    </div>
    <script>
    function GoInFullscreen(element) {
        if(element.requestFullscreen)
            element.requestFullscreen();
        else if(element.mozRequestFullScreen)
            element.mozRequestFullScreen();
        else if(element.webkitRequestFullscreen)
            element.webkitRequestFullscreen();
        else if(element.msRequestFullscreen)
            element.msRequestFullscreen();
    }

    function GoOutFullscreen() {
        if(document.exitFullscreen)
            document.exitFullscreen();
        else if(document.mozCancelFullScreen)
            document.mozCancelFullScreen();
        else if(document.webkitExitFullscreen)
            document.webkitExitFullscreen();
        else if(document.msExitFullscreen)
            document.msExitFullscreen();
    }

    function IsFullScreenCurrently() {
        var full_screen_element = document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement || null;

        if(full_screen_element === null)
            return false;
        else
            return true;
    }

    $("#go-button").on('click', function() {
        if(IsFullScreenCurrently())
            GoOutFullscreen();
        else
            GoInFullscreen($("#demo-element").get(0));
    });

    $(document).on('fullscreenchange webkitfullscreenchange mozfullscreenchange MSFullscreenChange', function() {
        if(IsFullScreenCurrently()) {
            $("#demo-element span").text('Full Screen Mode Enabled');
            $("#go-button").text('Disable Full Screen');
        }
        else {
            $("#demo-element span").text('Full Screen Mode Disabled');
            $("#go-button").text('Enable Full Screen');
        }
    });</script>

Wenn Sie sich in einer "Kiosk" -Situation befinden, können Sie dem Browserfenster nach dem Start einen F11 zuführen. Dies ist kein guter Start und der Benutzer kann möglicherweise einen Touchscreen oben einstecken und eine Halbvollbildansicht erhalten, aber das Füttern des F11 kann zur Not oder nur um mit einem Projekt zu beginnen.

Hier ist meine vollständige Lösung für Full Screenund Exit Full Screenbeides (vielen Dank an die Hilfe aus der obigen Antwort des Turms):

$(document).ready(function(){
$.is_fs = false;
$.requestFullScreen = function(calr)
{
    var element = document.body;

    // 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}");
        }
    }

    $.is_fs = true;    
    $(calr).val('Exit Full Screen');
}

$.cancel_fs = function(calr)
{
    var element = document; //and NOT document.body!!
    var requestMethod = element.exitFullScreen || element.mozCancelFullScreen || element.webkitExitFullScreen || element.mozExitFullScreen || element.msExitFullScreen || element.webkitCancelFullScreen;

    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}");
        }
    }    

    $(calr).val('Full Screen');    
    $.is_fs = false;
}

$.toggleFS = function(calr)
{    
    $.is_fs == true? $.cancel_fs(calr):$.requestFullScreen(calr);
}

});

// CALLING:

<input type="button" value="Full Screen" onclick="$.toggleFS(this);" />