前端好用API之Fullscreen

！win ！發表於2022-03-23
前端API

前情

在前端開發需求中，特別網頁有視訊需求時，需要做視訊全屏功能，或者在某些視覺化大屏專案也要做全屏。

Fullscreen介紹

讓你可以簡單地控制瀏覽器，使得一個元素與其子元素，如果存在的話，可以佔據整個螢幕，並在此期間，從螢幕上隱藏所有的瀏覽器使用者介面以及其他應用

呼叫方式：

/**
* 指定元素進入全屏模式
* @param {element} element
*/
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();
	}
}

相關API：

document.exitFullscreen() 讓當前文件退出全屏模式，跟requestFullscreen一樣要做好相容前輟處理

相關屬性：

document.fullscreenElement 被展示為全屏模式的element
document.fullscreenEnabled 表示全屏模式是否可用

相關事件：

element.onfullscreenchange 指定元素全屏事件發生時，事件傳送到該元素，表明該元素進入或退出全屏模式
element.onfullscreenerror 指定元素變全屏模式時出現錯誤，該事件將被髮送到指定的元素上

瀏覽器提供的一些css控制規則

/* element為當前全屏的元素 */
element:-webkit-full-screen {
/* properties */
}

element:-moz-fullscreen {
/* properties */
}

element:-ms-fullscreen {
/* properties */
}

element:fullscreen {
/* properties */
}

使用示例

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Fullscreen測試</title>
  <style type="text/css">
    *{
      padding:0;
      margin: 0;
    }
    .fullscrenn_element{
      width: 100px;
      height: 100px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: green;
      color: #fff;
    }
		.fullscrenn_element:-webkit-full-screen{
			background-color: red;
		}
		
		.fullscrenn_element:-moz-fullscreen{
			background-color: red;
		}
		
		.fullscrenn_element:-ms-fullscreen{
			background-color: red;
		}
		
		.fullscrenn_element:fullscreen{
			background-color: red;
		}
  </style>
</head>
<body>
  <div class="fullscrenn_element">全屏</div>
  <script type="text/javascript">
    var elementWrap = document.querySelector('.fullscrenn_element');

    if (fullscreenEnabled()) {
      init();
    } else {
      console.log('全屏模式不可用！');
    }

    function init() {

      addEvent(elementWrap);
  
      elementWrap.addEventListener('click', function() {
        console.log('--當前全屏元素--：', document.fullscreenElement);
        if (document.fullscreenElement) {
          cancelFullScreen(elementWrap);
        } else {
          launchFullScreen(elementWrap)
        }
      }, false);
    }

    /*
    * 檢測當前是否支援全屏
    */
    function fullscreenEnabled() {
      return document.fullscreenEnabled || 
      document.webkitFullscreenEnabled || 
      document.mozFullscreenEnabled ||
      document.msFullscreenEnabled
    }

    /**
    * 指定元素進入全屏模式
    * @param {element} element
    */
    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 cancelFullScreen() {
      if(document.exitFullscreen) {
        document.exitFullscreen();
      } else if(document.mozExitFullscreen) {
        document.mozExitFullscreen();
      } else if(document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
      } else if(document.msExitFullscreen) {
        document.msExitFullscreen();
      }
    }

    /*
    * 繫結全屏事件
    * param {Element} element
    */
    function addEvent(element) {
      var fullscreenchangeEvt = '';
      if ('onwebkitfullscreenchange' in element) {
        fullscreenchangeEvt = 'webkitfullscreenchange';
      }
      if ('onmozfullscreenchange' in element) {
        fullscreenchangeEvt = 'mozfullscreenchange';
      }
      if ('onmsfullscreenchange' in element) {
        fullscreenchangeEvt = 'msfullscreenchange';
      }
      if ('onfullscreenchange' in element) {
        fullscreenchangeEvt = 'fullscreenchange';
      }
      element.addEventListener(fullscreenchangeEvt, function(e) {
        console.log('--fullscreenchange--:', fullscreenchangeEvt, e);
      }, false);
    }

  </script>
</body>
</html>

相關文章