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

253

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

user63898
quelle
29
seine innere Anwendung, nicht für die Öffentlichkeit.
Ich
2
Sie könnten den Benutzer pragmatisch fragen:sprintf('Dear user, the best experience with this site is in fullscreen mode. To view this site full screen, press %s.', _get_browsers_full_Screen_key())
Boldewyn
6
Ich bin gespannt, wie der YouTube-Vollbildmodus funktioniert. Kennt jemand die Antwort?
Kasturi
6
Dies geschieht durch den Flash Player, nicht durch den Browser
user63898
5
Für einen Stand der Technik im Überblick Blick hier: hacks.mozilla.org/2012/01/...
loomi

Antworten:

54

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> 
Saul Dolgin
quelle
Schauen Sie sich den Link / die akzeptierte Antwort im Link an, den haim evgi gepostet hat ... Sie sollten nicht in der Lage sein, die Größe des Browsers zu ändern. Sie können jedoch innerhalb des Browserfensters maximieren (so wie ich es gelesen habe)
Lexu
4
Hängt von Ihren Javascript-Berechtigungseinstellungen in den Optionen ab. Sie können die js-Steuerung über Fensterfunktionen umschalten.
Garrow
3
Dies geschah das letzte Mal, als eine Site solchen
Quentin
2
Werfen Sie einen Blick auf die Webkit-Vollbild - API: bleeding-edge-tlv.appspot.com/#28 (von # gdd2011)
Christian Kuetbach
17
DAS IST ALT. SUCHEN SIE UNTEN NACH DER LÖSUNG!
Keavon
281

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

Turm
quelle
3
Derzeit in Chrome 15, Firefox 10 und Safari 5.1 verfügbar. In diesem Blog-Beitrag zu hacks.mozilla.org finden Sie Details zum aktuellen Stand der Dinge .
Simon Lieschke
10
Fantastisch, gibt es eine Möglichkeit, den Vollbildmodus zu verlassen?
Christopher Chase
2
Ein paar Dinge. Im IE wird dies offensichtlich das Element ignorieren und alles im Vollbildmodus anzeigen. Wenn Sie im Vollbildmodus alles übergeben möchten document.documentElement, wird sichergestellt, dass Sie das richtige Stammelement ('html' oder 'body') erhalten. Und verwenden kann verwenden cancelFullscreen(), um es zu schließen (oder 'F11' erneut für IE senden).
Matthew Wilcoxson
6
Sie kann nur vom Benutzer ausgelöst werden (z. B. über eine Vollbild-Schaltfläche). Ein automatischer Vollbildmodus während des Ladevorgangs ist nicht möglich.
A. KR
3
Rechtschreibfehler für IE sollte msRequestFullScreen sein, wie in den Dokumenten msdn.microsoft.com/en-us/library/ie/dn265028(v=vs.85).aspx
DanielB
66

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:

Peter O.
quelle
Funktioniert auf IE 8 oben, FF10 oben (versucht in FF 9, es funktioniert nicht), getestet auf Chrome 18
Treby
@Peter O. "sollte in einem Ereignishandler platziert werden", wie kann er beim Laden ausgelöst werden?
Francis P
@FrancisP: Nein; Weder "load" noch "DOMContentLoaded" ist ein anwendbares UIEvent oder MouseEvent für die Vollbild-API.
Peter O.
2
Vielen Dank für "(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 ".)"
Ja documentElementist besser als bodyfür mich.
Matt
24

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;
        }
mike nelson
quelle
1
Was ist mit msIsFullScreen?
Kangax
1
Die Spezifikation hat sich geändert. webkitCancelFullScreenist jetzt webkitExitFullscreen. generatecontent.org/post/70347573294/…
Doug S
Der erste Teil dieser Logik und Operation ist redundant und sollte entfernt werdendocument.fullScreenElement && document.fullScreenElement !== null
siehe Ratio
Ändern Sie die elemin toggleFull()von document.bodyzu document.documentElement, um das Problem mit dem linken und rechten Rand zu beheben
Firnas
11

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.

Sébastien Gicquel
quelle
8

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

Dhiraj
quelle
1
@ Ian Es funktioniert in IE Edge. Eine ältere Version des IE unterstützt dies nicht.
Dhiraj
8

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>
Jerry Rutherford
quelle
window.open (theURL, '', 'fullscreen = yes', 'scrollbars = auto'); Es gibt ein Parens Problem auf dieser Linie
Kevin Bowersox
Das ist allerdings vom Elternteil. Nicht hilfreich, wenn das Fenster bereits geöffnet wurde.
Christian
7

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>
Jacob
quelle
6

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>
Dixit
quelle
Die if-Anweisung scheint dies im Vollbildmodus in IE 11 nicht zu erkennen (wird also nicht geschlossen).
Ian
3

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/ .

Simonhamp
quelle
Erstaunliches kleines Drehbuch. Verwenden Sie es jetzt auf meiner Website unter www.StarCommanderOnline.com. Vielen Dank!
Andy
3

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.

Kacke eine Birke
quelle
3

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 .

Hassan Ahmed
quelle
2

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>
Srinivasan
quelle
2

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>

Santos L. Victor
quelle
Scheint für mich in Chrome 76 auf Ubuntu
Jonathan
1

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>
Sarin JS
quelle
1

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

window.fullScreen = true;
Leopd
quelle
1
Der Begriff "soll" ist in der Software so überladen. In einigen Browsern ist es schreibgeschützt. Mit Firefox 10 können Sie es einstellen.
Leopd
1

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>
SeekLoad
quelle
0

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.

Alex Robinson
quelle
0

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);" />
Raheel Hasan
quelle