JS全屏代码详解

一、JS代码全称

JS全屏代码是指通过JavaScript实现网页全屏化的一种技术。将HTML元素全屏显示，常在需要功能强大的特效的网站中比较常用，比如视频网站、图片展示网站等等。

二、JS全屏事件

实现JS全屏的第一个步骤就是监听全屏事件，基本语法如下：

    // 全屏事件。标准写法 document.onfullscreenchange
    var changeEvent = function() {
      console.log("fullscreen", document.fullscreen);
      console.log("全屏状态发生变化");
    };
    document.addEventListener("fullscreenchange", changeEvent, false);
    document.addEventListener("mozfullscreenchange", changeEvent, false);
    document.addEventListener("webkitfullscreenchange", changeEvent, false);
    document.addEventListener("MSFullscreenChange", changeEvent, false);

代码解析：

使用addEventListener函数监听全屏事件，监听了四种事件：fullscreenchange、mozfullscreenchange、webkitfullscreenchange、MSFullscreenChange，分别对应不同浏览器。其中，changeEvent函数是回调函数，当监听到事件时，系统会调用该函数。

三、JS代码大全

下面给出JS全屏代码，并且可以兼容 Chrome、Firefox、Safari、Opera、Edge 和 IE11 浏览器：

   function launchFullScreen(element) {
       if(element.requestFullscreen) {
           element.requestFullscreen();
       } else if(element.mozRequestFullScreen) {
           element.mozRequestFullScreen();
       } else if(element.webkitRequestFullscreen) {
           element.webkitRequestFullscreen();
       } else if(element.msRequestFullscreen) {
           element.msRequestFullscreen();
       }
   }
   function exitFullScreen() {
       if(document.exitFullscreen) {
           document.exitFullscreen();
       } else if(document.mozCancelFullScreen) {
           document.mozCancelFullScreen();
       } else if(document.webkitExitFullscreen) {
           document.webkitExitFullscreen();
       } else if(document.msExitFullscreen) {
           document.msExitFullscreen();
       }
   }

代码解析：

launchFullScreen函数是将指定元素（element）全屏显示的函数；exitFullScreen函数是退出全屏显示的函数。

四、JS全屏滚动

在全屏显示的时候，我们也经常需要全屏滚动的功能，以下给出滚动的基本代码：

  // 在element中，滑动时触发以下函数
  element.ontouchmove = function(event) {
    event.preventDefault();
  };
  // 滚轮滚动控制函数，兼容多浏览器
  window.addEventListener("mousewheel", scrollFunc, false);
  window.addEventListener("DOMMouseScroll", scrollFunc, false);
  function scrollFunc(e) {
    e = e || window.event;
    if (e.wheelDelta) {
      //ie/chrome
      if (e.wheelDelta > 0) {
        document.title = "向上滚";
        element.scrollTop -= 30;
      } else if (e.wheelDelta  0) {
        document.title = "向下滚";
        element.scrollTop += 30;
      } else if (e.detail < 0) {
        document.title = "向上滚";
        element.scrollTop -= 30;
      }
    }
  }

代码解析：

在移动端，我们需要监听用户滚动操作，用element.ontouchmove函数来实现。在PC端，我们则要通过addEventListener监听DOMMouseScroll、mousewheel事件，分别代表Firefox和IE/Chrome浏览器的浏览器滚轮事件。然后通过判断浏览器类型调用scrollFunc函数，实现滚轮滚动的效果。

五、JS自动全屏

有时我们需要在页面中自动全屏，以下代码实现了自动全屏：

    // 开启自动全屏
    var autoFull = function(eleme) {
      var ua = window.navigator.userAgent.toLowerCase(),
        docElm = doc.documentElement,
        i,
        ch,
        sc,
        si;
      eleme.onclick = function() {
        // 判断浏览器类别，调用不同函数
        if (/chrome\/(\d{2})/i.test(ua)) {
          sc = document.documentElement.scrollTop;
          eleme.requestFullscreen();
          window.setTimeout(function() {
            document.documentElement.scrollTop = document.body.scrollTop = sc;
          }, 200);
        } else if (/firefox\/(\d{2})/i.test(ua)) {
          si = docElm.scrollTop;
          eleme.requestFullscreen();
          window.setTimeout(function() {
            docElm.scrollTop = si;
          }, 200);
        } else {
          ch = document.documentElement.clientHeight;
          i = document.documentElement.scrollTop || document.body.scrollTop;
          eleme.requestFullscreen();
          window.setTimeout(function() {
            document.documentElement.scrollTop = document.body.scrollTop = (i * document.documentElement.clientHeight) / ch;
          }, 200);
        }
      };
    };

代码解析：

autoFull函数实现了自动全屏，其中包含判断浏览器类别，调用不同函数的功能。chrome浏览器需要记录滚动条位置，Firefox需要记录文档流位置，其他浏览器需要记录文档位置和浏览器高度进行换算。

六、JS浏览器全屏

对于一些不需要全屏显示内容的网站，我们也可以实现浏览器全屏的效果，以下代码实现了浏览器全屏：

    var fullScreen = function(el) {
      if (el.requestFullscreen) {
        el.requestFullscreen();
      } else if (el.msRequestFullscreen) {
        el.msRequestFullscreen();
      } else if (el.mozRequestFullScreen) {
        el.mozRequestFullScreen();
      } else if (el.webkitRequestFullScreen) {
        el.webkitRequestFullScreen();
      } else {
        alert("Sorry，您的浏览器不能全屏浏览！");
      }
    };

代码解析：

fullScreen函数实现了浏览器全屏的效果，同样兼容不同的浏览器类型。

七、JS页面全屏

在一些特殊情况下，我们需要实现整个网页的全屏，这时候需要进行以下操作：

  function launchFullscreen(element) {
    if (element.requestFullscreen) {
      element.requestFullscreen();
    } else if (element.mozRequestFullScreen) {
      element.mozRequestFullScreen();
    } else if (element.msRequestFullscreen) {
      element.msRequestFullscreen();
    } else if (element.webkitRequestFullscreen) {
      element.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
    }
    // 添加Evnet Listener
    element.addEventListener("webkitfullscreenchange", function() {
      element.webkitRequestFullScreen();
    });
    element.addEventListener("fullscreenchange", function() {
      element.requestFullscreen();
    });
    element.addEventListener("mozfullscreenchange", function() {
      element.mozRequestFullScreen();
    });
    element.addEventListener("MSFullscreenChange", function() {
      element.msRequestFullscreen();
    });
  }

代码解析：

launchFullscreen函数实现了整个网页的全屏显示，兼容性也比较好，但是需要添加webkitfullscreenchange、fullscreenchange、mozfullscreenchange、MSFullscreenChange这几个事件，否则在全屏模式下某些浏览器会出现全屏不完全、全屏退出异常等问题。

八、JS浏览器自动全屏

以下代码实现了浏览器自动全屏：

   function browserFullScreen() {
       var el = document.documentElement,
           rfs =
           el.requestFullScreen ||
           el.webkitRequestFullScreen ||
           el.mozRequestFullScreen ||
           el.msRequestFullscreen;
       if (typeof rfs != "undefined" && rfs) {
           rfs.call(el);
       }
   }

代码解析：

browserFullScreen函数实现了浏览器自动全屏，只需调用该函数就可以实现自动全屏。

九、JS监听全屏事件

以下代码给出了监听全屏事件的用例：

   document.addEventListener(
      "fullscreenchange",
      function(e) {
         console.log("全屏change事件", JSON.stringify(e));
      },
      false
   );

代码解析：

addEventListener函数监听了fullscreenchange事件，该事件的触发表示浏览器的全屏状态发生了改变，其回调函数console.log输出了监听到的全屏change事件，并把事件信息转换为字符串。