web-dev-qa-db-de.com

Wie wird das Fenster mit Javascript im Vollbildmodus dargestellt (erstreckt sich über den gesamten Bildschirm)

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

229
user63898

Dies ist so nahe, wie Sie in JavaScript den Vollbildmodus erreichen können:

<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> 
51
Saul Dolgin

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 möglich, abhängig von ihren 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 offensichtlich die Vollbildanforderung zuerst annehmen, und es ist nicht möglich, diese automatisch bei einem Seitenaufruf auszulösen. Er muss von einem Benutzer (z. B. einer Schaltfläche) ausgelöst werden.

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

261
Tower

Dieser Code enthält auch das Aktivieren des Vollbildmodus für Internet Explorer 9 und möglicherweise ältere Versionen von sowie aktuelle 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:

62
Peter O.

Hier ist eine Komplettlösung zum Ein- und Ausschalten des Vollbildmodus (aka 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;
        }
19
mike nelson

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>
8

Die neue html5-Technologie - Vollbild-API bietet uns einen einfachen Weg zu einen Webseiteninhalt im Vollbildmodus darstellen. Wir sind dabei zu geben Sie erhalten detaillierte Informationen zum Vollbildmodus. Versuche es einfach mit Stellen Sie sich alle möglichen Vorteile vor, die Sie mit dieser Technologie - Fotoalben, Videos und sogar Spiele im Vollbildmodus.

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

Sie finden das vollständige Tutorial 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

8
Dhiraj

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

Mit der Vollbild-API können Webinhalte auf einfache Weise .__ sein. wird auf dem gesamten Bildschirm des Benutzers dargestellt. Dieser Artikel enthält Informationen zur Verwendung dieser API.

8

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 setzen wie  

<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>
5
Dixit

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

Glücklicherweise für ahnungslose Internetbenutzer ist dies nicht nur mit Javascript möglich. Sie müssten browserspezifische Plugins schreiben, wenn sie noch nicht vorhanden waren, und dann die Leute dazu bringen, sie herunterzuladen. Am nächsten kommt ein maximiertes Fenster ohne Werkzeug oder Navigationsleisten, aber die Benutzer können die URL trotzdem sehen.

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

Dies wird im Allgemeinen als schlechte Praxis betrachtet, da dadurch viele Browserfunktionen vom Benutzer entfernt werden.

3
poop a birck

Nun, da die Vollbild-APIs weiter verbreitet sind und ausgereift zu sein scheinen, versuchen Sie es mit Screenfull.js . 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 diese mit der :fullscreen-Pseudoklasse in CSS koppeln. Weitere Informationen finden Sie unter https://www.sitepoint.com/use-html5-full-screen-api/ .

3
simonhamp

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

Versuchen Sie screenfull.js . Es ist eine nette browserübergreifende 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 in der Browser-Implementierung, sodass Sie dies nicht tun müssen.

Demo .

1
Hassan Ahmed

In Firefox 10 können Sie die aktuelle Seite unter Verwendung dieses Javascript zum Vollbildmodus (echter Vollbild ohne Fensterchrom) bringen:

window.fullScreen = true;
1
Leopd

Versuchen Sie dieses Skript

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

Für den Aufruf aus einem Skript verwenden Sie diesen Code.

window.fullScreen('fullscreen.jsp');

oder mit Hyperlink verwenden

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

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>

1

Wenn Sie sich in einer "Kiosk" -Situation befinden, können Sie im Vollbildmodus eine F11 in das Browser-Fenster einlegen, wenn es in Betrieb ist. Dies ist kein schöner Start, und der Benutzer kann möglicherweise einen Touchscreen oben anstoßen und eine halb-volle Bildschirmansicht erhalten, aber das F11-F11 kann eine Notlösung oder einfach nur ein Projekt beginnen.

0
Alex Robinson

Hier ist meine vollständige Lösung für Full Screen und Exit Full Screen (vielen Dank an die Antwort von Tower oben):

$(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);
}

});

//BERUFUNG:

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

Dies funktioniert, um Ihr Fenster im Vollbildmodus anzuzeigen

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