fullscreen.js

// 瀏覽器進入全屏
export const viewFullScreen = function () {
  // 主要，這邊要全屏的對象是這個body，如果只是選擇點擊的對象，比如 e.currentTarget，那么就會變成只有這個按鈕全屏
  var docElm = document.documentElement;
  // 瀏覽器兼容
  if (docElm.requestFullscreen) {
    docElm.requestFullscreen();
  } else if (docElm.msRequestFullscreen) {
    docElm.msRequestFullscreen();
  } else if (docElm.mozRequestFullScreen) {
    docElm.mozRequestFullScreen();
  } else if (docElm.webkitRequestFullScreen) {
    docElm.webkitRequestFullScreen();
  }
};


// 瀏覽器退出全屏
export const cancelFullScreen = function () {
  // 瀏覽器兼容
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.msExitFullscreen) {
    document.msExitFullscreen();
  } else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
  } else if (document.webkitCancelFullScreen) {
    document.webkitCancelFullScreen();
  }
};

/**
 * 監(jiān)聽瀏覽器全屏
 * @param open{Function}
 * @param cancel{Function}
 */
export const listenFullScreen = function (open, cancel) {
  // 瀏覽器兼容
  if (document.exitFullscreen) {

    document.addEventListener("fullscreenchange", function () {
      (document.fullscreenElement) ? open() : cancel();
    }, false);

  } else if (document.msExitFullscreen) {

    document.addEventListener("msfullscreenchange", function () {
      (document.msFullscreenElement) ? open() : cancel();
    }, false);

  } else if (document.mozCancelFullScreen) {

    document.addEventListener("mozfullscreenchange", function () {
      (document.mozFullScreen) ? open() : cancel();
    }, false);

  } else if (document.webkitCancelFullScreen) {

    document.addEventListener("webkitfullscreenchange", function () {
      (document.webkitIsFullScreen) ? open() : cancel();
    }, false);

  }
};

使用全屏事件只能由用戶行為觸發(fā),由于瀏覽器安全機制,不允許代碼自動觸發(fā)

viewFullScreen();  // 進入全屏

cancelFullScreen(); // 退出全屏

listenFullScreen(()=>{

  // 監(jiān)聽進入全屏

},()=>{

 // 監(jiān)聽退出全屏
  
})```