javascript - 图像/DIV 元素切换全屏

Question

下面的代码是一个工作示例，当您单击图像时它会全屏打开网页浏览器，但是我不知道如何在再次单击图像时让 javascript 切换全屏模式。

因此脚本需要在第一次点击图片时开启全屏模式，然后在第二次点击同一张图片时退出全屏模式。

HTML:

    <h1>Click image to toogle fullscreen mode</h1>
    <img id="logo" src="http://i.imgur.com/lPZh57Y.png" alt="logo" />

JavaScript:

(function () {
    var viewFullScreen = document.getElementById("logo");
    if (viewFullScreen) {
       viewFullScreen.addEventListener("click", function () {
           var docElm = document.documentElement;
           if (docElm.requestFullscreen) {
               docElm.requestFullscreen();
           }
           else if (docElm.msRequestFullscreen) {
               docElm.msRequestFullscreen();
           }
           else if (docElm.mozRequestFullScreen) {
               docElm.mozRequestFullScreen();
           }
           else if (docElm.webkitRequestFullScreen) {
               docElm.webkitRequestFullScreen();
           }
       }, false);
   }

  var cancelFullScreen = document.getElementById("logoCONFLICT");
  if (cancelFullScreen) {
     cancelFullScreen.addEventListener("click", function () {
        if (document.exitFullscreen) {
            document.exitFullscreen();
        }
        else if (document.msExitFullscreen) {
            document.msExitFullscreen();
        }
        else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        }
        else if (document.webkitCancelFullScreen) {
            document.webkitCancelFullScreen();
        }
     }, false);
  }   
})();

Answer 1

一个简单的解决方案是在您请求全屏和退出全屏调用时进行跟踪。并根据这个值运行相应的代码。为此，您不需要两个单独的点击监听器。另一个if else statement .

<script>
(function () {
    var viewFullScreen = document.getElementById("logo");
    var isFullScreen;

    if(viewFullScreen) {
        viewFullScreen.addEventListener("click", function () {

                    if(!isFullScreen) {

                        var docElm = document.documentElement;
                        if(docElm.requestFullscreen) docElm.requestFullscreen();
                        else if(docElm.msRequestFullscreen) docElm.msRequestFullscreen();
                        else if(docElm.mozRequestFullScreen) docElm.mozRequestFullScreen();
                        else if(docElm.webkitRequestFullScreen) docElm.webkitRequestFullScreen();

                        isFullScreen = true;

                    } else {

                        if(document.exitFullscreen) document.exitFullscreen();
                        else if(document.msExitFullscreen) document.msExitFullscreen();
                        else if(document.mozCancelFullScreen) document.mozCancelFullScreen();
                        else if(document.webkitCancelFullScreen) document.webkitCancelFullScreen();

                        isFullScreen = false;
                    }

                }, false);
    }
})();
</script>

还没有测试过，但应该可以。更好的方法是首先检测全屏状态并监听变化 as described here .而不是试图自己跟踪状态。

希望对您有所帮助!祝你好运!