Como fazer a janela em tela cheia com Javascript (estendendo-se por toda a tela)

Como posso fazer o navegador de um visitante ficar em tela cheia usando JavaScript, de uma maneira que funcione com o IE, Firefox e Opera?

É o mais próximo possível da tela cheia em 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> 

Em navegadores mais recentes, como Chrome 15, Firefox 10, Safari 5.1, IE 10, isso é possível. Também é possível para IE mais antigos via ActiveX, dependendo das configurações do navegador.

Veja como fazê-lo:

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

Obviamente, o usuário precisa aceitar a solicitação de tela cheia primeiro, e não é possível acioná-la automaticamente no carregamento da página; ela deve ser acionada por um usuário (por exemplo, um botão)

Leia mais: https://developer.mozilla.org/en/DOM/Using_full-screen_mode

Esse código também inclui como habilitar a tela cheia para o Internet Explorer 9 e provavelmente versões mais antigas, bem como versões muito recentes do Google Chrome. A resposta aceita também pode ser usada para outros navegadores.

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

Fontes:

• API de tela cheia do Chrome (observe, no entanto, que requestFullscreen"só funciona" "durante a maioria dos UIEvents e MouseEvents, como clique e pressionamento de tecla etc.", "para que não possa ser usado com intuito malicioso".)
• Como tornar o navegador em tela cheia usando o evento de tecla F11 por meio de JavaScript

Aqui está uma solução completa para entrar e sair do modo de tela cheia (também conhecido como cancelar, sair, escapar)

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

Você pode usar a API de tela cheia Você pode ver um exemplo aqui

A API de tela cheia fornece uma maneira fácil de o conteúdo da Web ser apresentado usando a tela inteira do usuário. Este artigo fornece informações sobre o uso desta API.

A nova tecnologia html5 - API em tela cheia nos oferece uma maneira fácil de apresentar o conteúdo de uma página da web no modo de tela inteira. Estamos prestes a fornecer informações detalhadas sobre o modo de tela cheia. Apenas tente imaginar todas as vantagens possíveis que você pode obter com essa tecnologia - álbuns de fotos em tela cheia, vídeos e até jogos.

Mas antes de descrevermos essa nova tecnologia, devo observar que essa tecnologia é experimental e é suportada por todos os principais navegadores .

Você pode encontrar o tutorial completo aqui: http://www.css-jquery-design.com/2013/11/javascript-jquery-fullscreen-browser-window-html5-technology/

Aqui está trabalhando Demo: http://demo.web3designs.com/javascript-jquery-fullscreen-browser-window-html5-technology.htm

Eu usei isso ...

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

Exemplo simples de: 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>

Criar Função

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

Em Html Coloque código como

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

Agora que as APIs de tela cheia estão mais difundidas e parecem estar amadurecendo, por que não tentar o Screenfull.js ? Eu o usei pela primeira vez ontem e hoje nosso aplicativo entra em tela cheia em quase todos os navegadores!

Certifique-se de associá-lo à :fullscreenpseudo-classe em CSS. Consulte https://www.sitepoint.com/use-html5-full-screen-api/ para obter mais informações.

Felizmente para usuários da web desavisados, isso não pode ser feito apenas com javascript. Você precisaria escrever plugins específicos do navegador, se eles ainda não existissem, e, de alguma forma, levar as pessoas a fazer o download deles. O mais próximo que você pode chegar é uma janela maximizada sem ferramentas ou barras de navegação, mas os usuários ainda poderão ver o URL.

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

Isso geralmente é considerado uma prática ruim, pois remove muitas funcionalidades do navegador do usuário.

Tente screenfull.js . É uma boa solução para vários navegadores que também deve funcionar no navegador Opera.

Wrapper simples para uso em vários navegadores da API JavaScript em tela cheia, que permite trazer a página ou qualquer elemento para a tela inteira. Suaviza as diferenças de implementação do navegador, para que você não precise.

Demo .

Isso pode suportar

<%@ 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>

Você pode tentar:

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

Experimente este script

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

Para chamar de script, use este código,

window.fullScreen('fullscreen.jsp');

ou com hiperlink, use este

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

No Firefox 10, você pode fazer com que a página atual fique em tela cheia (tela cheia real, sem cromo de janela) usando este javascript:

window.fullScreen = true;

Isso funcionará para mostrar sua janela em tela cheia

Nota: Para que isso funcione, é necessário consultar o http://code.jquery.com/jquery-2.1.1.min.js

Ou faça um link javascript como este.

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

Uma maneira de Q&D exibir a tela inteira, se você estiver em uma situação de "quiosque", é alimentar um F11 na janela do navegador depois que ele estiver funcionando. Isso não é bastante inicial e o usuário pode ser capaz de cutucar uma tela sensível ao toque na parte superior e obter uma visualização em tela semi-cheia, mas alimentar o F11 pode ser uma tarefa fácil ou apenas para começar um projeto.

Aqui está a minha solução completa para Full Screene Exit Full Screenambos (muito obrigado pela ajuda da resposta da torre acima):

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

});

// CHAMANDO:

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