h5页面实现浏览器全屏显示

Posted 2021-07-07 哈娄

目录

开启全屏显示

退出全屏显示

获取当前是否全屏状态

---

开启全屏显示

let el = document.documentElement;
// 不同浏览器兼容方法调用
if(el.requestFullScreen){
  el.requestFullScreen();
}else if(el.webkitRequestFullScreen){
  el.webkitRequestFullScreen();
}else if(el.mozRequestFullScreen){
  el.mozRequestFullScreen();
}else if(el.msRequestFullScreen){
  el.msRequestFullScreen();
}

退出全屏显示

if (document.exitFullscreen) {
   document.exitFullscreen();
} else if (document.mozCancelFullScreen) {
   document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) {
  document.webkitCancelFullScreen();
} else if (document.msCancelFullScreen) {
  document.msCancelFullScreen();
}

获取当前是否全屏状态

if(document.fullscreenElement || document.webkitFullScreenElement || document.mozFullScreenElement || document.msFullScreenElement){
   alert('当前是全屏')
}else{
   alert('当前非全屏')
}