js指定元素全屏并监听退出全屏

1.全屏实现

// 判断当前浏览器是否支持全屏
function requesetFullScreen(elem) {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.mozRequestFullScreen) {
    elem.mozRequestFullScreen();
  } else if (elem.webkitRequestFullScreen) {
    elem.webkitRequestFullScreen();
  }else if(elem.msRequestFullScreen){
    elem.msRequestFullScreen();
  }else {
    alert('当前浏览器不支持全屏,请更换浏览器')
    return false
  }
}

function screenfull(elemId) {
  let elem = document.querySelector(elemId) || document.documentElement;
  if(document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement){
    alert('当前窗口已全屏显示')
  }else {
    requesetFullScreen(elem);
  }
}

2.监听esc取消全屏

document.addEventListener('fullscreenchange', e => {
   // 监听到屏幕变化,在回调中判断是否已退出全屏
})

从网上也看到了能够实现退出全屏的方法,但是我chrome和firefox上尝试了一下,并没有看到能退出全屏的效果。如果有哪位大佬证实能够实现退出全屏的方法,麻烦告诉我一下,我再进行改正。

最后感谢各位看官老爷。

你可能感兴趣的:(js指定元素全屏并监听退出全屏)