JavaScript全屏和退出全屏事件总结（附代码）

代码如下：

window.isflsgrn = false;//ie11以下是否进入全屏标志，true为全屏状态，false为非全屏状态      window.ieIsfSceen = false;//ie11是否进入全屏标志，true为全屏状态，false为非全屏状态      //跨浏览器返回当前 document 是否进入了可以请求全屏模式的状态      function fullscreenEnable(){        var isFullscreen = document.fullscreenEnabled ||        window.fullScreen ||        document.mozFullscreenEnabled ||        document.webkitIsFullScreen;        return isFullscreen;      }      //全屏      var fScreen = function(){        var docElm = document.documentElement;        if (docElm.requestFullscreen) {          docElm.requestFullscreen();        }        else if (docElm.msRequestFullscreen) {          docElm.msRequestFullscreen();          ieIsfSceen = true;        }        else if (docElm.mozRequestFullScreen) {          docElm.mozRequestFullScreen();        }        else if (docElm.webkitRequestFullScreen) {          docElm.webkitRequestFullScreen();        }else {//对不支持全屏API浏览器的处理，隐藏不需要显示的元素          window.parent.hideTopBottom();          isflsgrn = true;          $("#fsbutton").text("退出全屏");        }      }      //退出全屏      var cfScreen = function(){        if (document.exitFullscreen) {          document.exitFullscreen();        }        else if (document.msExitFullscreen) {          document.msExitFullscreen();        }        else if (document.mozCancelFullScreen) {          document.mozCancelFullScreen();        }        else if (document.webkitCancelFullScreen) {          document.webkitCancelFullScreen();        }else {          window.parent.showTopBottom();          isflsgrn = false;          $("#fsbutton").text("全屏");        }      }      //全屏按钮点击事件      $("#fsbutton").click(function(){        var isfScreen = fullscreenEnable();        if(!isfScreen && isflsgrn == false){          if (ieIsfSceen == true) {            document.msExitFullscreen();            ieIsfSceen = false;            return;          }          fScreen();        }else{          cfScreen();        }      })      //键盘操作      $(document).keydown(function (event) {        if(event.keyCode == 27 && ieIsfSceen == true){          ieIsfSceen = false;        }      });      //监听状态变化      if (window.addEventListener) {        document.addEventListener('fullscreenchange', function(){           if($("#fsbutton").text() == "全屏"){            $("#fsbutton").text("退出全屏");           }else{            $("#fsbutton").text("全屏");          }        });        document.addEventListener('webkitfullscreenchange', function(){           if($("#fsbutton").text() == "全屏"){            $("#fsbutton").text("退出全屏");           }else{            $("#fsbutton").text("全屏");          }        });        document.addEventListener('mozfullscreenchange', function(){           if($("#fsbutton").text() == "全屏"){            $("#fsbutton").text("退出全屏");           }else{            $("#fsbutton").text("全屏");          }        });        document.addEventListener('MSFullscreenChange', function(){           if($("#fsbutton").text() == "全屏"){            $("#fsbutton").text("退出全屏");           }else{            $("#fsbutton").text("全屏");          }        });      }

值得注意的是 fullscreenEnabled 参数，网上的说法不一，有的说是监控浏览器是否进入了可以请求全屏模式的状态，有的说只是一个判断浏览器是否支持全屏的标志，实际使用时也确实出现了问题，IE11不能识别这个属性，需要自己单独设置一个标记来控制IE11当前是否为全屏状态。

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助~如果有疑问大家可以留言交流，谢谢大家对的支持!