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事件，並把事件信息轉換為字符串。