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

2023-08-03   阅读:1694   分类:前端    标签: 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退出全屏,显示全屏按钮。

【腾讯云】 爆款2核2G3M云服务器首年 61元,2核2G4M云服务器新老同享 99元/年,续费同价

‘简忆博客’微信公众号 扫码关注‘简忆博客’微信公众号,获取最新文章动态
转载:请说明文章出处“来源简忆博客”。http://www.tpxhm.com/fdetail/1007.html

×
觉得文章有用就打赏一下文章作者
微信扫一扫打赏 微信扫一扫打赏
支付宝扫一扫打赏 支付宝扫一扫打赏

文章评论(0)

登录
简忆博客壁纸一
简忆博客壁纸二
简忆博客壁纸三
简忆博客壁纸四
简忆博客壁纸五
简忆博客壁纸六
简忆博客壁纸七
简忆博客壁纸八
头像

简忆博客
勤于学习,乐于分享

置顶推荐

打赏本站

如果你觉得本站很棒,可以通过扫码支付打赏哦!
微信扫码:你说多少就多少~
微信扫码
支付宝扫码:你说多少就多少~
支付宝扫码
×