3

Tenho um botão que ao clicar nele a tela fica full screen (faz a mesma coisa que o f11).

Porem quando eu clico no botão novamente, ele não sai da tela full screen.

Preciso que ao clicar no botão a tela fica full, mas se eu clicar novamente a tela volta ao normal no navegador.

Meu código atual.

$(document).ready(function () {
        //Toggle fullscreen
        $("#panel-fullscreen").click(function (e) {
            var
                el = document.documentElement
                , rfs =
                    el.requestFullScreen
                    || el.webkitRequestFullScreen
                    || el.mozRequestFullScreen
                ;
            rfs.call(el);
        });
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="panel-fullscreen" class="btn bg-laranja" style="float: right;">
  <i class="glyphicon glyphicon-resize-full position-left"></i> Full
</button>

Fiddle

2 Respostas 2

3

Separei pra você uma página HTML simples com o código em javascript nativo de forma explicativa que faz exatamente o que você precisa.

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<h2>Fullscreen com JavaScript</h2>
<p>Clique no botão abaixo para ativar/desativar o modo Fullscreen de sua tela.</p>

<button onclick="AtivarDesativarFS();">Ativar/Desativar</button>

<script>
//Criando uma variável global para nos dizer em qual estado a tela atual se encontra.
isFullScreen = false;
var elem = document.documentElement;
function AtivarDesativarFS() {
    //Se o estado atual for "FullScreen", desativá-lo.
    //Note que para as verificações é feito uma validação para todos os possíveis navegadores, facilitando a sua vida.
      if (document.exitFullscreen) {
      document.exitFullscreen();
      isFullScreen = false;
    } else if (document.mozCancelFullScreen) { /* Firefox */
      document.mozCancelFullScreen();
      isFullScreen = false;
    } else if (document.webkitExitFullscreen) { /* Chrome, Safari & Opera */
      document.webkitExitFullscreen();
    } else if (document.msExitFullscreen) { /* IE/Edge */
      document.msExitFullscreen();
      isFullScreen = false;
    }


  if (elem.requestFullscreen) {
     elem.requestFullscreen();
     isFullScreen = true;
  } else if (elem.mozRequestFullScreen) { /* Firefox */
     elem.mozRequestFullScreen();
      isFullScreen = true;
  } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
    elem.webkitRequestFullscreen();
     isFullScreen = true;
  } else if (elem.msRequestFullscreen) { /* IE/Edge */
    elem.msRequestFullscreen();
     isFullScreen = true;
  }

}
</script>

</body>
</html>

Espero ter ajudado!

9
  • 1
    Perfeito! muito obrigado.
    – Renan
    10/10/2018 às 16:28
  • @RenanOsorio Seu feedback é muito importante para pessoas que têm a intenção de ajudar!! Me diga, funcionou no seu projeto? 10/10/2018 às 16:52
  • 1
    SIm, já implementei, funcionou direitinho. Mas já que você perguntou, tem um bug na logica que eu fiz, que é o seguinte, quando eu clico no botão eu dou um hide no meu menu principal, quando eu clico denovo eu dou um show no menu, até ai tranquilo, mas se eu clicar e der hide no menu e depois dar um ESC no teclado, o menu continua em hide. vou publicar a logica aqui assim que possível.
    – Renan
    10/10/2018 às 17:24
  • ta aqui o código(codepen.io/anon/pen/GYmrry), procurei na internet mas não achei a solução, se você souber me avisa. até.
    – Renan
    10/10/2018 às 17:41
  • @RenanOsorio basta apenas adicionar essa função abaixo: → document.onkeydown = function(evt) { evt = evt || window.event; if (evt.keyCode == 27) { document.getElementById("item").style.display = 'block'; } }; ← //Ela verifica se o botão 27 - 'Escape' ou mais conhecido 'Esc' é pressionado, ao ser pressionada, altera o style do #Item. Se esse comentário também foi útil, adiciona a setinha ↑ pra esse comentário e o anterior que fiz somente para dar uma força, beleza? Valeu. 10/10/2018 às 18:12
2

Tente usar o JavaScript abaixo:

(function () {

var fsicon = document.createElement('img');
var srcFSI = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAI1JREFUeNrsV0EOwCAI6w/8/6lP8gk8ZTuPLUoirltCEy8mpY0iIAAcg0WsgxONreIRE4+bhnzYr05AkgO2wQQHV3wxwAmBieJe6xY8w0Q0BlcDZHOngXqA1zPziE68BTjNmWDGM4qKexNEoVAoJPVzWSGSlmJpM3q1HcsHEvlI9omhtL5m9TWT5cApwAD/IigEZttSgAAAAABJRU5ErkJggg==';
var srcFSIexit = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABVQTFRFAAAAAAAAAAAAAAAAAAAAAAAAAAAAEgEApAAAAAZ0Uk5TAA+fz9/vpTOW9gAAAJNJREFUKM/NkkEKwyAUBSeeQOoFDAX3duERcoQcQJN3/yN08RVLUui2fyE4Ph/IyPLiY56eoDj3TpmiOkFSI2lEPE6qtgSA3A+TtBaA9pAq4KRTANr77SQZUO93E1j9sg9wegDCTGQAygTN80fz+3FsAxx8T1w7nHQY2CySpJgAqpMq3QVANA3mwo/6eld5k339Dm89PDdxiEGVaQAAAABJRU5ErkJggg==';
fsicon.src = srcFSI;
fsicon.id = 'fsicon';

fsicon.style.opacity = 0.5;
fsicon.style.filter = 'alpha( opacity=50 )';
fsicon.style.cursor = 'pointer';
fsicon.style.zIndex = 2000;
fsicon.style.top = '10px';
fsicon.style.right = '10px';
fsicon.style.position = 'fixed';

document.body.appendChild(fsicon);


    var fsicon = document.getElementById("fsicon");

    if (fsicon) {
        fsicon.addEventListener("click", function () {
          if(fsicon.getAttribute('src')!=srcFSIexit){
                var docElm = document.documentElement;
                if (docElm.requestFullscreen) {
                    docElm.requestFullscreen();
                }
                else if (docElm.mozRequestFullScreen) {
                    docElm.mozRequestFullScreen();
                }
                else if (docElm.webkitRequestFullScreen) {
                    docElm.webkitRequestFullScreen();
                }
            }else{
                if (document.exitFullscreen) {
                    document.exitFullscreen();
                }
                else if (document.mozCancelFullScreen) {
                    document.mozCancelFullScreen();
                }
                else if (document.webkitCancelFullScreen) {
                    document.webkitCancelFullScreen();
                }
            }

        }, false);
    }
    if (fsicon) {
        document.addEventListener("fullscreenchange", function () {
             if(document.fullscreenElement){
                fsicon.setAttribute('src',srcFSIexit);
             }else{
                fsicon.setAttribute('src',srcFSI);
             };

        }, false);

        document.addEventListener("mozfullscreenchange", function () {
            if(document.mozFullScreen){
                fsicon.setAttribute('src',srcFSIexit);
             }else{
                fsicon.setAttribute('src',srcFSI);
             };
        }, false);

        document.addEventListener("webkitfullscreenchange", function () {
            if(document.webkitIsFullScreen){
                fsicon.setAttribute('src',srcFSIexit);
             }else{
                fsicon.setAttribute('src',srcFSI);
             };
        }, false);
    }
})();
3
  • Testei seu código e funcionou aqui, vou adequar ele pra minha necessidade, obrigado colega.
    – Renan
    10/10/2018 às 15:56
  • @RenanOsorio minha solução não ajudou? 11/10/2018 às 11:57
  • Ajudou, mas o do André ficou mais perto do que eu precisava, vlw ai pela ajuda.
    – Renan
    11/10/2018 às 11:59

Você deve fazer log-in para responder a esta pergunta.

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