Come rendere la finestra a schermo intero con Javascript (che si estende su tutto lo schermo)

Come faccio a rendere il browser di un visitatore a schermo intero utilizzando JavaScript, in un modo che funziona con IE, Firefox e Opera?

Questo è il più vicino che puoi ottenere a schermo intero in JavaScript:

  

Nei nuovi browser come Chrome 15, Firefox 10, Safari 5.1, IE 10 questo è ansible. È anche ansible per IE meno recenti tramite ActiveX in base alle impostazioni del browser.

Ecco come farlo:

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

Ovviamente l’utente deve prima accettare la richiesta a schermo intero, e non è ansible triggersrla automaticamente sul pageload, deve essere triggersta da un utente (ad esempio un pulsante)

Ulteriori informazioni: https://developer.mozilla.org/en/DOM/Using_full-screen_mode

Questo codice include anche come abilitare lo schermo intero per Internet Explorer 9 e probabilmente versioni precedenti, così come le versioni molto recenti di Google Chrome. La risposta accettata può essere utilizzata anche per altri browser.

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

fonti:

  • Chrome Fullscreen API (nota, tuttavia, che requestFullScreen “funziona solo durante” “[m] ost UIEvents e MouseEvents, come clic e keydown, ecc.”, “Quindi non può essere utilizzato maliziosamente”.)
  • Come rendere il browser a schermo intero utilizzando l’evento chiave F11 tramite JavaScript

Ecco una soluzione completa per entrare e uscire dalla modalità a schermo intero (ovvero cancellare, uscire, uscire)

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

Puoi utilizzare l’API a schermo intero Puoi vedere un esempio qui

L’API a schermo intero offre un modo semplice per la presentazione di contenuti Web utilizzando l’intero schermo dell’utente. Questo articolo fornisce informazioni sull’utilizzo di questa API.

La nuova tecnologia html5 – API fullscreen ci offre un modo semplice per presentare un contenuto di una pagina Web in modalità a schermo intero. Stiamo per fornirti informazioni dettagliate sulla modalità a schermo intero. Prova a immaginare tutti i possibili vantaggi che puoi ottenere utilizzando questa tecnologia: album fotografici, video e persino giochi a schermo intero.

Ma prima di descrivere questa nuova tecnologia, devo notare che questa tecnologia è sperimentale e supportata da tutti i principali browser .

Puoi trovare il tutorial completo qui: http://www.css-jquery-design.com/2013/11/javascript-jquery-fullscreen-browser-window-html5-technology/

Qui sta lavorando Demo: http://demo.web3designs.com/javascript-jquery-fullscreen-browser-window-html5-technology.htm

Ho usato questo …

       

Open In Full Screen

Semplice esempio da: http://www.longtailvideo.com/blog/26517/using-the-browsers-new-html5-fullscreen-capabilities/

    

Crea funzione

 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 codice Html come

 
  • Full Screen
  • Back

Ora che le API a schermo intero sono più diffuse e sembrano essere in fase di maturazione, perché non provare Screenfull.js ? L’ho usato per la prima volta ieri e oggi la nostra app diventa veramente a schermo intero in (quasi) tutti i browser!

Assicurati di accoppiarlo con la pseudo-class :fullscreen in CSS. Vedi https://www.sitepoint.com/use-html5-full-screen-api/ per ulteriori informazioni.

Fortunatamente per gli utenti web ignari, questo non può essere fatto con solo javascript. Avresti bisogno di scrivere plugin specifici per il browser, se non esistessero già, e poi in qualche modo convincere la gente a scaricarli. Il più vicino che puoi ottenere è una finestra ingrandita senza strumenti o barre di navigazione ma gli utenti saranno comunque in grado di vedere l’url.

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

Questo è generalmente considerato una ctriggers pratica anche se rimuove molte funzionalità del browser da parte dell’utente.

Questo può supportare

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

Prova questo script

  

Per chiamare dallo script usa questo codice,

 window.fullScreen('fullscreen.jsp'); 

o con hyperlink usa questo

  Open in Full Screen Window 

In Firefox 10, puoi fare in modo che la pagina corrente vada a schermo intero (vero schermo intero senza finestra di Chrome) usando questo javascript:

 window.fullScreen = true; 

Un modo Q & D per andare a schermo intero, se si è in una situazione di “chiosco”, è quello di alimentare un F11 alla finestra del browser dopo che è attivo e funzionante. Questo non è un buon inizio e l’utente potrebbe essere in grado di colpire uno schermo tattile in alto e ottenere una visualizzazione semi-a schermo intero, ma l’alimentazione della F11 potrebbe fare in un pizzico o solo per iniziare un progetto.

Ecco la mia soluzione Full Screen per Full Screen e Exit Full Screen entrambi (molte grazie per l’aiuto della risposta di Tower sopra):

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

// CHIAMATA: