2018-10-19 全屏实现方法

JS控制浏览器全屏，通过点击按钮实现

JS 全屏方法

//获取需要全屏的元素
const elem = document.querySelector('元素');
if(elem){
  //判断浏览器类型
  if (elem.requestFullscreen) {
        elem.requestFullscreen();
  } else if (elem.webkitRequestFullScreen) {
        elem.webkitRequestFullScreen();
  }else if (elem. msRequestFullscreen) {
        elem. msRequestFullscreen();
  }else if(elem. mozRequestFullScreen){
        elem. mozRequestFullscreen();
  }

JS退出全屏的方法（通过点击按钮退出全屏）

//获取全屏元素
 const fullscreenElement: any =
         document.fullscreenElement ||
         document.webkitFullscreenElement ||
         document.mozFullscreenElement ||
         document.msFullscreenElement ;
if(fullscreenElement){
  if (document.exitFullscreen) {
     document.exitFullscreen();
  } else if (document.webkitExitFullscreen) {
    document.webkitExitFullscreen();
  } else if (document.mozExitFullscreen) {
    document.mozExitFullscreen();
  }else if (document.msExitFullscreen) {
    document.msExitFullscreen();
  }
}

JS通过按esc 退出全屏的方法（对用户按esc退出做处理）,精华在fullscreenchange方法

function exitHandler() { 
  const fullscreenElement: any =
      document.fullscreenElement ||
      document.webkitFullscreenElement ||
      document.mozFullscreenElement ||
      document.msFullscreenElement ||;
  const hideFunc = function() {
    //按自己需求做处理
    }
    if (headItem) {headItem.style.display = 'block'; }
    sideElem.style.display = 'block';
    contentElem.style.marginLeft = '';
  }; 
  if (fullscreenElement === null) { 
    hideFunc(); 
  }
  } 
document.addEventListener('webkitfullscreenchange', exitHandler, false); 
document.addEventListener('mozfullscreenchange', exitHandler, false);
document.addEventListener('fullscreenchange', exitHandler, false);
document.addEventListener('MSFullscreenChange', exitHandler, false);

扩展阅读：

https://www.aliyun.com/jiaocheng/981181.html
https://stackoverflow.com/questions/10706070/how-to-detect-when-a-page-exits-fullscreen