Ziv小威

HTML5 全屏特性

Ziv小威 发表于2015-01-24 Javascript

本文作者:Ziv 原文地址:http://imziv.com/blog/article/read.htm?id=58

全屏功能是浏览器很早就支持的一项功能了,可以让你页面中的video, image ,div 等等子元素实现全屏浏览,从而带来更好的视觉体验,来看看怎么使用吧。先来看看有哪些API和事件支持。

API


// 元素请求全屏显示  
element.requestFullscreen()

// 检测文档的当前状态是否允许执行全屏操作 
document.fullscreenEnabled()

//当前显示的元素是否处于全屏状态,如果处于,则返回为非空对象,否则返回null
document.fullscreenElement

//元素退出全屏显示
document.exitFullscreen()

上面除了RequestFullscreen()是支持element 对象以外,其他3个都只是支持document.

Event

fullscreenchange   // 全屏状态更改时触发

fullscreenerror  //  执行全屏错误时触发

由于每个浏览器实现的方式不一样,所以我们实际的调用中还不能直接这样写,需要针对不同的浏览器做支持检测,下面跟着详细的例子看下具体兼容代码。

html

<body>
<img id="imgFS" src=""/>
<a id="btnFS" href="javascript:;"> FullScreen </a>
</body>

javascript

var fullScreen = document.getElementById('btnFS');
fullScreen.addEventListener("click", function(){

    var status = document.fullscreenEnabled || 
        document.webkitFullscreenEnabled ||
        document.mozFullscreenEnabled ||
        document.msFullscrrenEnabled;
        if (status) {
            var img = document.getElementById("imgFS");
            if (img.requestFullscreen) {
                img.requestFullscreen();
            } else if (img.msRequestFullscreen) { // IE
                img.msRequestFUllscreen();
            } else if (img.mozRequestFullscreen) { // Firefox (Gecko)
                img.mozRequestFullscreen();
            } else if (img.webkitRequestFullscreen) { // Webkit
                img.webkitRequestFullscreen();
            }
        } else {
            alert("The document not allowed to fullscreen.");
        }
});

以上代码针对一个图片元素进行了全屏操作的例子,上文中的全屏触发是通过监听一个按钮来实现的,这个地方需要注意的是,假如你想在页面载入后就触发全屏,这个事件是不会触发执行全屏显示的。只有通过例如click, keydown等触发事件,才可以启用全屏显示的功能。

监听键盘按钮触发

下面的代码示例通过按键F12来触发启用或者关闭的操作,主要是利用了element.fullscreenElement 方法来判断当前的文档状态,来进行切换的,具体代码如下:

document.addEventListener("keydown", function(e){
    console.log(e.keyCode);
    if (e.keyCode == 123) { // keypress fn + F12 for Mac
        fullscreen();
    }
});

function fullscreen() {
    var body = document.body;
    var status = !document.fullscreenElement &&  // get the screen status
        !document.msFullscreenElement &&
        !document.mozFullscreenElement &&
        !document.webkitFullscreenElement;

    if (status) {
        if (body.requestFullscreen) {
            body.requestFullscreen();
        } else if (body.mozRequestFullscreen) {
            body.mozRequestFullscreen();
        } else if (body.webkitRequestFullscreen) {
            body.webkitRequestFullscreen();
        } else if (body.msRequestFullscreen) {
            body.msRequestFUllscreen();
        }
    } else {
        if (document.exitFullscreen) {
            document.exitFullscreen();
        } else if (document.mozExitFullscreen) {
            document.mozExitFullscreen();
        } else if (document.webkitExitFullscreen) {
            document.webkitExitFullscreen();
        } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
        }
    }
}

全屏样式

全屏效果下,可以启用针对该状态下的特定样式,从而达到更好的浏览效果。样式定义如下:

:-webkit-full-screen { // Webkit
}
 
:-moz-full-screen {  // Gecko
}
 
:-ms-fullscreen { // IE
}
 
:fullscreen {
}

// 调用示例

#elementID :fullscreen {
    width:100%;
    height:100%;
}

:fullscreen::backdrop {  // 背光
}

// 全屏背光,这是一个新的样式属性,但是目前浏览器支持的的都不太好, 在IE11中被支持,另外下面提到的Opera12.1,使用了:fullscreen-ancestor, 调用方法如下

:-ms-fullscreen::-ms-backdrop {
    background-color: #000; 
}

在这个地方需要注意的是,Gecko和Webkit在全屏状态下显示是有差异的,Gecko会默认把指定的全屏元素进行width:100%;height:100%,而Webkit则是显示一片黑色,所以这个地方就需要针对全屏的元素进行样式调整了,参考以上代码示例。

浏览器兼容情况

参考地址:Caniuse

另外上面有说道下面几个问题,可以注意下。

总结

总之全屏是一个非常棒的特性,它可以让我们的Web拥有像原生应用一样体验,在以后的项目中会多尝试下这个特性。

本文参考

Using fullscreen mode

Fullscreen API Living Standard

How to Use the HTML5 Full-Screen API (Again)

Ziv小威 · Javascript

让美的事情发生

 
comments powered by Disqus