2

Procurei um pouco sobre o mesmo no google e a maioria as pessoas falam para usar

position: absolute;
z-index:9999;
width:100%;
height:100%;
top:0;
left:0;

Porém o código acima só funciona para por em fullscreen dentro da janela, e não é isso que quero, eu quero usar Fullscreen de verdade, toda a tela do usuário e então achei o código abaixo:

if (!document.fullscreenElement &&
      !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement ) {  
    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();
    }
  }

Esse funciona perfeitamente, porém coloca todo o documento em tela cheia, e eu quero apenas uma div especifica em fullscreen, como posso fazer isso?

Marcaram que essa pergunta é igual a essa, porém não é, as soluções apresentadas na mesma são as mesmas que estou indagando aqui para tentar adaptar ao meu uso. Existe alguma maneira de ativar a tela cheia do navegador com Javascript?

8
  • Ja tentou trocar o document pelo id da div? 17/01/2017 às 10:59
  • Sim tentei colocando assim $(div) e obtendo a mesmo pelo getElementById mas não funcionou
    – Leo Letto
    17/01/2017 às 11:00
  • Você quer o elemento em fullscreen (aquele que fecha o navegador todo, inclusive a barra de endereços (F11)) ou apenas sobrescrever os demais elementos do site (como o snnipet do SOpt)?
    – Randrade
    17/01/2017 às 11:22
  • @Randrade sim eu quero colocar o elemento em fullscreen, 100% do monitor do usuário
    – Leo Letto
    17/01/2017 às 11:59
  • Sua dúvida já tem resposta nesta pergunta. Veja o exemplo de uma das resposta funcionando no JSFiddle.
    – Randrade
    17/01/2017 às 12:22

3 Respostas 3

4

Você já possui o código pronto, basta alterar o document para o elemento desejado, como neste exemplo abaixo:

function toggleFullScreen(id) {

  var div = document.getElementById(id);

  if ((document.fullScreenElement && document.fullScreenElement !== null) ||
    (!document.mozFullScreen && !document.webkitIsFullScreen)) {
    if (div.requestFullScreen) {
      div.requestFullScreen();
    } else if (div.mozRequestFullScreen) {
      div.mozRequestFullScreen();
    } else if (div.webkitRequestFullScreen) {
      div.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
    }
  } else {
    if (document.cancelFullScreen) {
      document.cancelFullScreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.webkitCancelFullScreen) {
      document.webkitCancelFullScreen();
    }
  }
}
.red {
  background-color: red;
  height: 200px;
  width: 200px;
}
.blue {
  background-color: blue;
  height: 200px;
  width: 200px;
}
<div id="full">
  <input type="button" value="clique para alternar" onclick="toggleFullScreen('full')">

  <div class="red">
  </div>
</div>

<br/>
<div id="full2">
  <input type="button" value="clique para alternar" onclick="toggleFullScreen('full2')">

  <div class="blue">
  </div>
</div>

Por motivos que desconheço, no Snnipet do SOpt o código não funciona. Mas você pode ver o funcionamento no JSFiddle.

Para maiores detalhes, veja esta pergunta.

1
  • 1
    Perfeito man, exatamente o que eu precisava.
    – Leo Letto
    17/01/2017 às 12:58
0

Esconda os outros elementos que você não quer (display: none) para apenas a tua DIV ficar a vista no full screen.

1
  • Essa é uma opção que pode funcionar, mas se houver uma forma de colocar só a div, eu acharia mais "prático"
    – Leo Letto
    17/01/2017 às 11:03
0

Segue o codigo abaixo HTML:

<div id="DivFull">
  <canvas style="background-color:red;" />
</div>

<input type="button" value="clique para ativar tela cheia" id="btnFullScreen">

E em JAVASCRIPT:

$("#btnFullScreen").click(function(e){
    var el = document.getElementById("DivFull");

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

SEGUE O JSFIDDLE FUNCIONANDO:

EXEMPLO

7
  • Funcionou bem para colocar o elemento em fullscreen, mas e para voltar, através do mesmo botão? Se eu pressionar F11 ele volta ao normal, mas quero deixar a opção pra voltar ao normal por botão também
    – Leo Letto
    17/01/2017 às 11:37
  • Inclua o botao dentro da div 17/01/2017 às 11:38
  • Já tem um botão que ao ser clicado chama a função, porém não está saindo do fullscreen
    – Leo Letto
    17/01/2017 às 11:40
  • No seu próprio exemplo se usar o botão para voltar, ele não funciona
    – Leo Letto
    17/01/2017 às 11:56
  • Ok, estou fazendo um exemplo aqui pra resolver esse problema 17/01/2017 às 12:02

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .