JS實現元素的全屏、退出全屏功能

 在實際開發中，我們很可能需要實現某一元素的全屏和退出全屏功能，如canvas。所幸的是，js提供了相關api用來處理這一問題，只需簡單的調用requestFullScreen、exitFullScreen即可。但這兩個api一般而言需要考慮其兼容性問題，那么就需要額外封裝一下。筆者參考相關資料，結合自身實踐，最終整理出以下封裝函數，理念雖然沒有特別之處，但這種封裝的寫法卻屬於一種微原創。以下經過實際項目驗證可行（如有誤，歡迎指出）：

一、全屏

  // 全屏的兼容
  const fullScreen = ele => {
    const func =
      ele.requestFullscreen ||
      ele.mozRequestFullScreen ||
      ele.webkitRequestFullscreen ||
      ele.msRequestFullscreen;
    func.call(ele);
  };

在上面的函數中，首先是判斷瀏覽器支持的api是哪一個，以實現兼容，而后調用它。在調用的時候需要重新綁定一下ele，否則會報錯。這種寫法避免了繁瑣的if else寫法，更加易讀。

二、退出全屏

  // 退出全屏的兼容
  const exitFullscreen = () => {
    const func =
      document.exitFullScreen ||
      document.mozCancelFullScreen ||
      document.webkitExitFullscreen ||
      document.msExitFullscreen;
    func.call(document);
  };

理由同上，這里需要注意的是，無需再傳遞dom元素，因為退出全屏屬於document的api。