js全屏操作之判断全屏

判断浏览器是否支持requestFullscreen

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

/**
 * [isFullscreenEnabled 判断浏览器是否支持h5全屏api]
 * @return [支持返回true,不支持返回undefined]
 */
function isFullscreenEnabled(){
    var fullscreenEnabled = document.fullscreenEnabled       ||
                            document.mozFullScreenEnabled    ||
                            document.webkitFullscreenEnabled ||
                            document.msFullscreenEnabled;
    return fullscreenEnabled;
}

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

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

图1:这是未进行任何全屏下的状态图2:这是使用h5全屏api(requestFullscreen)后的全屏

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

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

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

/**
 * [isFullscreen 判断浏览器是否全屏]
 * @return [全屏返回true,不全屏返回undefined]
 */
function isFullscreen(){
    var fullscreenElement = document.fullscreenElement    ||
                            document.msFullscreenElement  ||
                            document.mozFullScreenElement ||
                            document.webkitFullscreenElement;
    return fullscreenElement;
}

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

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

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

 

欢迎分享本文,转载请保留出处:前端ABC » js全屏操作之判断全屏

赞 (0)
分享到:更多 ()

发表评论 0