web-dev-qa-db-de.com

Führen Sie eine Website im Vollbildmodus aus

Ich suche nach einem Trick, um meine Website ohne menschliche Interaktion in den Vollbildmodus zu bringen.

Ich habe einige Beispiele mit HTML5-Techniken gefunden, die dann alle durch eine menschliche Interaktion ausgelöst werden müssen.

Diese Website wird in einem TV angezeigt ...

Ich denke bereits beim Laden der Website mit einer SWF-Datei im Vollbildmodus, aber anstatt in diese Richtung zu gehen, möchte ich alle Möglichkeiten mit dem Standardmuster (html, css und javascript) betonen.

17
Marcio Barroso

Sie können nicht forcieren eine Website im Vollbildmodus anzeigen.

Stellen Sie sich die Sicherheitsbedenken vor, wenn dies möglich wäre.
Schädliche Websites könnten einen Computer mit weniger Computerkenntnissen für alle Arten von zweifelhaften Geschäften "hijacken".

Alle von JS-Vollbild-APIs werfen einen Fehler wie folgt aus:
"Failed to execute 'requestFullScreen' on 'Element': API can only be initiated by a user gesture." Wenn Sie versuchen, es einfach aus Ihrem Code heraus aufzurufen.

Ich bin mir ziemlich sicher, dass Flash ähnlich ist, da es für den Vollbildmodus Benutzerinteraktion erfordert. Andernfalls hätten wir einen angemessenen Anteil an Vollbild-Popups gesehen, deren Schließen nahezu unmöglich ist.

25
Cerbrus

Andere Antworten beschreiben bereits, wie Sie mehr oder weniger browserunabhängig auf den Vollbildmodus zugreifen können ..__ Das Problem der Benutzerinteraktion bleibt jedoch bestehen.


Sie können Ihre Webseite aus Sicherheitsgründen nicht zwingen, im Vollbildmodus anzuzeigen. Dazu ist eine Benutzerinteraktion erforderlich.

Außerdem verlässt der Browser den Vollbildmodus, wenn der Benutzer zu einer anderen Seite wechselt, selbst auf derselben Website, und er muss auf jeder Seite eine "Benutzerinteraktion" durchführen, um wieder in den Vollbildmodus zu gelangen.
Dies ist der Grund, warum Ihre Website eine einzige Seite sein muss, wenn Sie möchten, dass sie im Vollbildmodus angezeigt wird.


Das ist, was ich vorschlage: Verwenden Sie eine einzelne Splash-Seite, die einen hidden iFrame enthält.

Wenn der Benutzer irgendwo klickt oder eine Taste drückt, legen Sie diesen iFrame einfach als Vollbild fest und zeigen Sie ihn an. Wenn Sie beim Verlassen des Vollbildmodus ein Ereignis erhalten, blenden Sie den iFrame erneut aus, um den Splash anzuzeigen.

Links werden standardmäßig in demselben Frame geöffnet. Sie bleiben also im Vollbildmodus, bis der Benutzer sie explizit verlässt oder einige Links in einem neuen Tab geöffnet werden.

Hier ein Beispiel, das in Chrome funktioniert:
( Sehen Sie es in Aktion. Verwenden Sie andere Antworten, um es browserunabhängig zu machen.)

<html>
<head>
    <script language="jscript">
        function goFullscreen() {
            // Must be called as a result of user interaction to work
            mf = document.getElementById("main_frame");
            mf.webkitRequestFullscreen();
            mf.style.display="";
        }
        function fullscreenChanged() {
            if (document.webkitFullscreenElement == null) {
                mf = document.getElementById("main_frame");
                mf.style.display="none";
            }
        }
        document.onwebkitfullscreenchange = fullscreenChanged;
        document.documentElement.onclick = goFullscreen;
        document.onkeydown = goFullscreen;
    </script>
</head>
<body style="margin:0">
    <H1>Click anywhere or press any key to browse <u>Python documentation</u> in fullscreen.</H1>
    <iframe id="main_frame" src="https://docs.python.org" style="width:100%;height:100%;border:none;display:none"></iframe>
</body>
</html>

Beachten Sie jedoch, dass Websites das Einbetten häufig nicht zulassen, z. in einem iframe angezeigt werden. In diesem Beispiel wurde anfangs die W3Schools-Website anstelle von Python-Dokumenten verwendet, der Kopf der 'X-Frame-Options' wurde jedoch auf 'sameorigin' gesetzt (Cross-Site-Embedding ist nicht zulässig) und das Programm wurde nicht mehr ausgeführt.


P.S. Ich mag die Idee, ein vollwertiges Betriebssystem im Browser zu simulieren, und es ist noch besser im Vollbildmodus! :) Ändere dein Betriebssystem!
Ich bin auch kein Webentwickler. Ich dachte nur, diese Frage wäre interessant zu untersuchen.

6
EvgEnZh

Möglicherweise können Sie requestFullScreen () - Methoden verwenden, wie unter https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode beschrieben.

Hinweis: Dies erfordert immer noch Benutzereingaben - vermeiden Sie jedoch die Verwendung von Flash.

function toggleFullScreen() {
  if (!document.fullscreenElement &&    // alternative standard method
      !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement ) {  // current working methods
    if (document.documentElement.requestFullscreen) {
      document.documentElement.requestFullscreen();
    } else if (document.documentElement.msRequestFullscreen) {
      document.documentElement.msRequestFullscreen();
    } else if (document.documentElement.mozRequestFullScreen) {
      document.documentElement.mozRequestFullScreen();
    } else if (document.documentElement.webkitRequestFullscreen) {
      document.documentElement.webkitRequestFullscreen(Element.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();
    }
  }
}

toggleFullScreen();

Dadurch kann die Seite im Vollbildmodus aktiviert werden. Möglicherweise kann sie auch über das Laden einer Seite auf einer Javascript-Seite aktiviert werden. Ältere Browser werden jedoch nicht unterstützt.

4
Kami

Wenn ich etwas Ähnliches machen musste, benutzte ich einen Begrüßungsbildschirm. Die Schaltfläche, um in den Vollbildmodus zu gelangen, erforderte es als Attribut eines JS-Pop:

 onClick="window.open('pageName.html', 'test', 'fullscreen=yes')"

Dies ist nicht vollständig sicher, hat aber besser funktioniert als alle anderen Methoden, die ich gefunden habe. Sie werden dies wahrscheinlich nicht ohne Benutzerinteraktion tun können. Wenn Sie beispielsweise einen Begrüßungsbildschirm verwenden, können Sie den Eingriff auf etwas allgemeiner akzeptiertes Maß reduzieren.

1
Nicholas

Dies war nicht genau das, wonach das OP suchte, aber in meiner speziellen Situation fand ich eine Kombination aus Kiosk-Modus und dynamischem Styling.

Ich wollte einen Browser mit einer bestimmten URL starten und ihn im Vollbildmodus starten. Der Anwendungsfall ist wenig bis keine Benutzerinteraktion an einem Terminal in einem Fertigungswerk mit Statusanzeige. Nach dem Einschalten muss nur der Status ohne Interaktion angezeigt werden (d. H. Keine Konfigurationsoberflächenelemente anzeigen, sofern der Benutzer nicht interagiert).

Vielleicht nicht realistisch auf einer komplexen Website, aber meine Verwendung war ein bestimmtes "Teilfenster" (in diesem Fall div). Um mich auf das jeweilige div zu konzentrieren, habe ich die anderen divs versteckt und die Stile entsprechend eingestellt. Wenn zufällig Benutzerinteraktion von und zu Vollbild wechseln soll, verwende ich (1) das reguläre myElement. * RequestFullScreen () - Dokument. * ExitFullscreen () ruft auf, (2) die anderen divs anzeigen/ausblenden und (3) zwischen den Klassen unten:

.right-pane-fullscreen
{
    margin-left: 0px;
}

.right-pane-normal
{
    margin-left: 225px;
}

Verwandte Diskussionen zur Verwendung des Kiosk-Modus in Chrome (Beachten Sie, dass andere Chrome-Prozesse, die vor dem Start des Kiosk-Modus ausgeführt werden, dies verhindern können.) Öffnen des Chrome-Browsers im Vollfenster- oder Kiosk-Modus unter Windows 7

0
pigeon