H5全屏显示方法及浏览器兼容解决方案

全屏操作的主要方法和属性

• 1.requestFullScreen():开启全屏显示

• 克服兼容性：不同浏览器需要添加不同的前缀: chrom:webkit firefox:moz ie:ms opera: o

          /*添加三个按钮的点击事件*/
          /*全屏操作*/
          document.querySelector("#full").onclick= function () {
              /*使用能力测试添加不同浏览器下的前缀*/
              if(div.requestFullScreen){
                  div.requestFullScreen();
              }else if(div.webkitRequestFullScreen){
                  div.webkitRequestFullScreen();
              }
              else if(div.mozRequestFullScreen){
                  div.mozRequestFullScreen();
              }else if(div.msRequestFullScreen){
                  div.msRequestFullScreen();
              }
          }
  

• 2.cancelFullScreen():退出全屏显示

• 也添加前缀，在不同的浏览器下，退出全屏只能使用document来实现（整个文档退出）

          /*退出全屏*/
      document.querySelector("#cancelFull").onclick= function () {
          /*使用能力测试添加不同浏览器下的前缀*/
          if(document.cancelFullScreen){
              document.cancelFullScreen();
          }else if(document.webkitCancelFullScreen){
              document.webkitCancelFullScreen();
          }
          else if(document.mozCancelFullScreen){
              document.mozCancelFullScreen();
          }else if(document.msCancelFullScreen){
              document.msCancelFullScreen();
          }
      }
  

• 3.fullScreenElement:是否是全屏状态

• 添加前缀，要使用document进行判断

      document.querySelector("#isfull").onclick= function () {
          /*两个细节:使用document判断  能力测试*/
          if(document.fullscreenElement || document.webkitFullScreenElement || document.mozFullScreenElement || document.msFullScreenElement){
              alert(true);
          }else{
              alert(false);
          }
      }
  

  效果图：