js全屏操作之判断全屏

判断浏览器是否支持requestFullscreen

首先是一段判断浏览器是否支持h5全屏api(requestFullscreen)的代码,如下

        /**
         * [isFullscreenEnabled 判断全屏模式是否是可用]
         * @return [支持则返回true,不支持返回false]
         */
        function isFullscreenEnabled(){
            return document.fullscreenEnabled       ||
                   document.mozFullScreenEnabled    ||
                   document.webkitFullscreenEnabled ||
                   document.msFullscreenEnabled || false;
        }

现在来区分一下全屏的两种情况

第一种:局部全屏,这里得把使用h5全屏api(requestFullscreen)和使用浏览器自带的全屏快捷键F11区分开来,如下图:

图1:这是未进行任何全屏下的状态

在这里插入图片描述

图2:这是使用h5全屏api(requestFullscreen)后的全屏

在这里插入图片描述

图3:这是使用浏览器自带的全屏快捷键F11达到的全屏

在这里插入图片描述
效果显而易见,按F11快捷键的全屏只是把浏览器地址栏给隐藏掉了而已,而h5的全屏api将“需要全屏的dom元素”给全屏了,这个时候就无需判断F11快捷键的全屏了,只需判断h5全屏的属性(fullscreenElement)即可,代码如下:

        /**
         * [isFullscreen 判断浏览器是否全屏]
         * @return [全屏则返回当前调用全屏的元素,不全屏返回false]
         */
        function isFullscreen(){
            return document.fullscreenElement    ||
                   document.msFullscreenElement  ||
                   document.mozFullScreenElement ||
                   document.webkitFullscreenElement || false;
        }

第二种:整个页面被一个标签铺满,页面没有出现滚动条的全屏(通常是在做网页游戏),在这种情况下,使用h5全屏api(requestFullscreen)和使用浏览器自带的全屏快捷键F11达到的效果是一样的,如下图。

在这里插入图片描述

在这种情况下,全屏判断就得考虑是否是按了F11键全屏,此时,就不能使用h5的判断全屏的属性(fullscreenElement)去判断全屏了,此属性只在调用setFullscreen函数全屏时判断有效,而在使用浏览器“F11”全屏快捷键的时候无效,这个时候得根据浏览器可视区域与电脑屏幕大小做比较,来判断是否全屏,无论是setFullscreen函数还是按“F11”亲测有效。代码如下:

        function isFullscreenForNoScroll(){
            var explorer = window.navigator.userAgent.toLowerCase();
            if(explorer.indexOf('chrome')>0){//webkit
                if (document.body.scrollHeight === window.screen.height && document.body.scrollWidth === window.screen.width) {
                    alert("全屏");
                } else {
                    alert("不全屏");
                }
            }else{//IE 9+  fireFox
                if (window.outerHeight === window.screen.height && window.outerWidth === window.screen.width) {
                    alert("全屏");
                } else {
                    alert("不全屏");
                }
            }
        }

总结

isFullscreen方法有滚动条的页面无滚动条的页面
Fullscreen api启动的全屏
按f11启动的全屏××
isFullscreenForNoScroll方法有滚动条的页面无滚动条的页面
Fullscreen api启动的全屏×
按f11启动的全屏×

√:方法有效;
×:方法无效;

目前还无法判断有滚动条按f11的全屏状态。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值