Uruchamianie witryny w trybie pełnoekranowym

Question

Poszukuję podstępu, aby umieścić moją witrynę w trybie pełnoekranowym bez interakcji z innymi użytkownikami.

Znalazłem kilka przykładów przy użyciu technik HTML5, ale wszystko to musi zostać wywołane przez interakcję z człowiekiem.

Ta strona zostanie wyświetlona w telewizorze ...

już myśleć w obciążeniu na stronę przy użyciu pliku SWF w trybie pełnoekranowym, ale zamiast iść do tego kierunku, chciałbym podkreślić wszystkie możliwości za pomocą tylko domyślny wzorzec (html, css i javascript)

Answer 1

Nie możesz wymusić strony internetowej, aby wyświetlić w trybie pełnoekranowym.

Wyobraź sobie obawy o bezpieczeństwo, jeśli to było możliwe.
Złośliwe witryny internetowe mogą "przejąć kontrolę" na komputerze o mniejszej inteligencji komputerowej dla wszelkiego rodzaju wątpliwych interesów.

Wszystko JS pełnoekranowych API wygeneruje błąd takiego:
"Failed to execute 'requestFullScreen' on 'Element': API can only be initiated by a user gesture." Jeśli próbujesz po prostu zadzwonić ze swojego kodu.

Jestem całkiem pewien, że Flash jest podobny, ponieważ wymaga interakcji z użytkownikiem, aby przejść do trybu pełnoekranowego. W przeciwnym razie widzielibyśmy nasz sprawiedliwy udział pełnoekranowych pop-upów, których zamknięcie jest prawie niemożliwe.

Answer 2

Możliwe jest użycie metod requestFullScreen() zgodnie z opisem podanym na https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode.

Uwaga: nadal wymaga to wprowadzania danych przez użytkownika, ale należy unikać używania lampy błyskowej.

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

Pozwala to na aktywację strony na pełnym ekranie i może być aktywowana poprzez ładowanie strony na stronie javascript. Jednak nie ma obsługi starszych przeglądarek.

Answer 3

Kiedy potrzebowałem czegoś podobnego, skorzystałem z ekranu powitalnego. Przycisk, aby kontynuować w trybie pełnoekranowym zwróciła go jako atrybut pop JS:

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

To nie jest fullproof, ale działało lepiej niż jakiekolwiek inne metody znalazłem. Prawdopodobnie nie będziesz w stanie tego zrobić bez interakcji użytkownika, więc użycie czegoś takiego jak ekran powitalny pozwala zminimalizować wtargnięcie do czegoś bardziej powszechnie akceptowanego.

Answer 4

Inne odpowiedzi opisują już, w jaki sposób można przejść na pełny ekran w sposób mniej lub bardziej niezależny od przeglądarki. Pozostaje jednak problem wymagający interakcji użytkownika.

---

Nie można wymusić, aby strona internetowa była wyświetlana w trybie pełnoekranowym ze względów bezpieczeństwa. Wymagana jest interakcja użytkownika.

Przeglądarka opuszcza tryb pełnoekranowy za każdym razem, gdy użytkownik przejdzie na inną stronę, nawet na tej samej stronie, i będzie musiał wykonać "interakcję użytkownika" na każdej stronie, aby powrócić do trybu pełnoekranowego.
To jest powód, dla którego witryna musi być jedną stroną, jeśli chcesz, aby była pełnoekranowa.

---

To, co proponuję: Użyj pojedynczej strony powitalny, który ma ukrytych iFrame na nim.

Zawsze, gdy użytkownik kliknie w dowolnym miejscu lub naciśnie dowolny klawisz, wystarczy ustawić tę ramkę iFrame na pełny ekran i wyświetlić ją. Gdy otrzymasz zdarzenie po wyjściu z trybu pełnoekranowego, ukryj iFrame ponownie, aby wyświetlić powitalny.

Łącza są domyślnie otwarte w tej samej ramce, więc pozostaniesz w trybie pełnoekranowym do momentu, aż użytkownik jawnie je opuści lub niektóre łącza zostaną otwarte w nowej karcie.

Oto przykład, który działa w Chrome: (. See it in action. Użyj inne odpowiedzi, aby niezależny od przeglądarki)

<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>w3schools</u> in fullscreen.</H1> 
    <iframe id="main_frame" src="http://www.w3schools.com" style="width:100%;height:100%;border:none;display:none"></iframe> 
</body> 
</html> 

---

PS: Podoba mi się link podany przez @jsve powyżej, a tym samym jest jeszcze lepszy: change your OS :).
Ponadto nie jestem programistą stron internetowych. Pomyślałem, że to pytanie będzie interesujące do zbadania.

Answer 5

Nie jest to dokładnie to, czego szukał OP, ale w mojej szczególnej sytuacji znalazłem połączenie trybu kiosku i dynamicznej stylizacji do działania.

Szukałem, aby uruchomić przeglądarkę z określonym adresem URL i uruchomić ją w trybie pełnoekranowym. Przypadki użycia nie wymagają interakcji z użytkownikiem na terminalu w zakładzie produkcyjnym z ekranem stanu. Po włączeniu zasilania musi wyświetlać tylko stan bez interakcji (tj. Nie wyświetlać żadnych elementów interfejsu użytkownika, chyba że użytkownik wchodzi w interakcje).

Być może nie jest to realistyczne na złożonej stronie, ale moim użyciem był szczególny element "pane" (div w tym przypadku). Aby skupić się na konkretnym div, ukryłem pozostałe elementy div i odpowiednio ustawiłem style. Jeśli zdarzy się, że interakcja użytkownika zmieni się zi na pełny ekran, ja (1) użyję zwykłego dokumentu myElement. * RequestFullScreen(). * ExitFullscreen() wywołania, (2) pokaż/ukryj pozostałe elementy div i (3) przełącz między klasami poniżej:

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

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

Powiązane dyskusja na temat korzystania z trybu kiosku w Chrome (należy pamiętać, że inne Chrome uruchomione procesy przed uruchomieniem trybu kiosku można temu zapobiec roboczy) Opening Chrome browser in full window or kiosk mode on windows 7