美文网首页
js html5 切换全屏

js html5 切换全屏

作者: 此昵称已被狗抢占 | 来源:发表于2019-04-10 13:51 被阅读0次
var isFullscreenState = false;

function toggleFullscreen() {
  if (!isFullscreenState) {
    let { documentElement } = document;
    let requestFullscreen =
      documentElement.requestFullscreen ||
      documentElement.mozRequestFullScreen ||
      documentElement.webkitRequestFullScreen ||
      documentElement.msRequestFullscreen;

    requestFullscreen.apply(documentElement);
    isFullscreenState = true;
  } else {
    let exitFullscreen =
      document.exitFullscreen ||
      document.mozCancelFullScreen ||
      document.webkitCancelFullScreen ||
      document.msExitFullscreen;

    exitFullscreen.apply(document);
    isFullscreenState = false;
  }
}

// 判断是否是全屏
// 按F11时也能判断到,但按F11全屏后不能调用document.exitFullscreen退出全屏
// 既然用户会用F11,那也没必要考虑吧这种情况了吧
window.addEventListener('resize', () => {
  if(window.innerHeight >=
    screen.height - Math.abs(window.innerHeight - window.outerHeight)){
    // ..
   }
 
});

相关文章

网友评论

      本文标题:js html5 切换全屏

      本文链接:https://www.haomeiwen.com/subject/pzyniqtx.html