明天的明天 永远的永远 未知的一切 我与你一起承担 ??

是非成败转头空 青山依旧在 几度夕阳红 。。。
随笔 - 1277, 文章 - 0, 评论 - 214, 阅读 - 320万
  博客园  :: 首页  :: 管理
< 2025年3月 >
日 一 二 三 四 五 六
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

jquery 实现全屏

Posted on   且行且思  阅读(641)  评论(0)  编辑  收藏  举报

主要用到两个方法

调用各个浏览器提供的全屏方法

复制代码
function handleFullScreen() {
    var de = document.documentElement;
    if (de.requestFullscreen) {
        de.requestFullscreen();
    } else if (de.msRequestFullscreen) {
        de.msRequestFullscreen();
    } else if (de.webkitRequestFullScreen) {
        de.webkitRequestFullScreen();
    } else if (de.mozRequestFullScreen) {
        de.mozRequestFullScreen();
    } else {
        wtx.info("当前浏览器不支持全屏！");
    }
}
复制代码

其中：msRequestFullscreen ie浏览器的全屏方法。

调用各个浏览器提供的退出全屏方法


复制代码
function exitFullscreen() {
    var de = document;
    if(de.exitFullscreen) {
        de.exitFullscreen();
    } else if(de.msExitFullscreen) {
        de.msExitFullscreen();
    } else if(de.mozCancelFullScreen) {
        de.mozCancelFullScreen();
    } else if(de.webkitExitFullscreen) {
        de.webkitExitFullscreen();
    }
}
复制代码

 

其中：msExitFullscreen退出全屏ie浏览器的方法。

接下来就是调用两个封装好的方法实现全屏。

1、首先在body内放置一个点击事件，按钮；此处简写。

 

<body>
    <input class="enterClass" type="button" value="切换全屏" />
    <input class="returnClass" type="button" value="退出全屏" />
</body>

 

2、获取.enterClass样式的点击事件,实现全屏

$(".enterClass").click(function () {
     handleFullScreen();  //全屏
     $('.enterClass').css('display','none');
     $('.returnClass').css('display','block');
 });

 

3、获取.returnClass样式的点击事件，退出全屏

$(".returnClass").click(function () {
    exitFullscreen();   //退出全屏
    $('.enterClass').css('display','block');
    $('.returnClass').css('display','none');
});

其中enterClass 和 returnClass是此处按钮的样式以及位置的放置，如果想要给这个按钮加移入移除颜色的改变样式可以使用 id选择器的方式进行改变。

 

检测全屏

复制代码
let fullscreenEnabled =
        document.fullscreenEnabled ||
        document.mozFullScreenEnabled ||
        document.webkitFullscreenEnabled ||
        document.msFullscreenEnabled || undefined;

 if (fullscreenEnabled) {
    let de = document.documentElement;
    //打开全屏
    if (de.requestFullscreen) {
      de.requestFullscreen().then(
        (status) => {
          // 正常打开全屏不需要任何操作
          console.log('正常打开全屏');
          // do something
        },
        (err) => {
         console.log('不正常打开全屏')
         // do something 
        }
     );
   } else if (de.mozRequestFullScreen) {
     de.mozRequestFullScreen()
   } else if (de.webkitRequestFullScreen) {
     de.webkitRequestFullScreen();
   }
} else {
  console.log('无法打开全屏');
}
复制代码

 

 

注意、API要求必须由用户触发，摸拟点击也无法通过。

 

 

相关博文：
· 浏览器全屏之requestFullScreen全屏与F11全屏
· JavaScript实现F5效果，清空缓存并刷新页面
· js 实现全屏
· 如何实现一个全屏的功能？
· JS 全屏和退出全屏--requestFullScreen详解及兼容代码
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
历史上的今天：
2022-07-06 解决mysqld: [ERROR] Found option without preceding group in
点击右上角即可分享
微信分享提示
AI IDE Trae