当前位置： 移动技术网 > IT编程>开发语言>JavaScript > JavaScript全屏和退出全屏事件总结（附代码）

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

2017年12月12日  | 移动技术网IT编程  | 我要评论

代码如下：

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当前是否为全屏状态。

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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网