JavaScript点击按钮或F11键盘实现全屏以及判断是否是全屏

2023-08-03 阅读：1780 分类：前端标签： JavaScript

有时候我们做一些网页活动，需要用到全屏，我们可以使用JavaScript点击按钮或F11键盘实现全屏以及判断是否是全屏

1、点击按钮实现全屏

<script>
// 全屏显示
$(".translate").click(function(){
 document.documentElement.requestFullscreen()
 $('.contron').hide();
})
</script>

2、判断是否是全屏，用于执行后续操作

<script>
/**
 * @description: 检测有没有元素处于全屏状态
 * @return false: 当前没有元素在全屏状态
 * @return true: 有元素在全屏状态
 */
function isEleFullScreen() {
 const fullScreenEle =
  document.fullscreenElement ||
  document.msFullscreenElement ||
  document.mozFullScreenElement ||
  document.webkitFullscreenElement;
 if (fullScreenEle === null) {
  return false;
 } else {
  return true;
 }
};
</script>

3、监听全屏事件，判断元素是否隐藏

<script>
//监听退出全屏事件
  window.onresize = function() {
   // console.log(isEleFullScreen())
   if(isEleFullScreen()==true){
    $('.contron').hide();
   }else{
    $('.contron').show();
   }
  }
</script>

4、监听用户按下键盘F11键，阻止默认行为，执行全屏

// 监听f11键
$(document).keydown(function(event) {
 if (event.which == 122) { // 122是F1键的键码
   event.preventDefault(); // 阻止默认行为
  // 在此处添加您的代码以响应F11键事件
  document.documentElement.requestFullscreen() //全屏
  $('.contron').hide();
 }
});

这里默认打开网页是有全屏按钮的，点击全屏按钮，会自动隐藏全屏按钮，按下键盘全屏快捷按钮，实现全屏，点击ESC按钮或者F11退出全屏，显示全屏按钮。