Javascript 原生全屏API的简单示例

感兴趣的小伙伴，下面一起跟随编程之家 jb51.cc的小编来看看吧。
HTML 5的<video>是一个相当不错的标签，但是它刚发布的时间，最大的问题是它不能像Flash那样实现真正的全屏。幸好，几个月后，大部分浏览器已经原生地支持全屏。

全屏API简史

第一个原生的全屏接口是在Safari 5.0（和iOS）中添加的 webkitEnterFullScreen() 函数。不过，它只能用于<video>标签。
在Safari 5.1中，苹果修改了这个API使它更接近于Mozilla的全屏API草案（比苹果的实现更早）。现在，所有DOM元素都可以调用 webkitRequestFullScreen() 方法。
Firefox和Chome表示它们将会添加原生全屏API支持，而且这个特性已经在Chome 15+以及Firefox Nightly中实现。
在2011年10月15日，W3C发布了一份全屏API草案（由Opera团队的一名成员编写），它跟Mozilla的草案有两个主要的不同点：

Mozilla/Webkit使用大写字母'S'（FullScreen），但W3C则不是（Fullscreen）；
Mozilla/Webkit使用cancelFullScreen，W3C使用exitFullscreen。

理解全屏API

检测全屏支持

首先，你需要使用typeof检测浏览器是否支持全屏API。同时，也要检测一个布尔属性fullScreenEnabled，它会告诉你用户是否启用了全屏特性。 JS代码如下：


/**
 * 原生全屏API
 *
 * @param 
 * @arrange (编程之家) jb51.cc
 **/
// Mozilla草案的API：实际上，你还需要检测其他厂商的前缀
if (typeof document.cancelFullScreen != 'undefined' && document.fullScreenEnabled === true) {
    /* do fullscreen stuff */
}

进入和退出全屏

要进入全屏模式，可以调用该元素的requestFullScreen（或者W3C的 requestFullscreen）方法。。要退出全屏，则调用document对象的cancelFullScreen（或者W3C的exitFullscreen）方法。 JS代码如下：


/**
 * 原生全屏API
 *
 * @param 
 * @arrange (编程之家) jb51.cc
 **/
// mozilla草案
element.requestFullScreen();
document.cancelFullScreen();

// Webkit (works in Safari and Chrome)
element.webkitRequestFullScreen();
document.webkitCancelFullScreen();

// Firefox (works in nightly)
element.mozRequestFullScreen();
document.mozCancelFullScreen();

// W3C
element.requestFullscreen();
document.exitFullscreen();

Mozilla还提供了一个备用的requestFullScreenWithKeys()方法让用户可以通过键盘进入全屏模式。在Flash中，Adobe一直在全屏状态时禁止键盘支持，以防止恶意网站试图窃取密码，但浏览器制造商似乎正考虑使之成为一个可选设置。

全屏事件和当前状态

要检测全屏事件的发生，可以监听元素的fullscreeneventchange事件，而document的布尔属性fullScreen会指明当前是否全屏状态。 JS代码如下：


/**
 * 原生全屏API
 *
 * @param 
 * @arrange (编程之家) jb51.cc
 **/
element.addEventListener('fullscreeneventchange',function(e) {
    if (document.fullScreen) {
        /* make it look good for fullscreen */
    } else {
        /* return to the normal state in page */
    }
},true);

Mozilla也提到在将来增加一个fullscreendenied事件。另外，Webkit在全屏布尔属性的名字上加了'Is'： JS代码如下：


/**
 * 原生全屏API
 *
 * @param 
 * @arrange (编程之家) jb51.cc
 **/
// Mozilla草案
document.fullScreen;

// Firefox (Nightly)
document.mozFullScreen;

// Webkit (Chrome,Safari)
document.webkitIsFullScreen; // 注意多了'Is'

// W3C草案
document.fullscreen;

全屏样式

Mozilla和W3C都提供了新的伪CSS类来装饰元素的全屏模式。 css代码如下：


/**
 * 原生全屏API
 *
 * @param 
 * @arrange (编程之家) jb51.cc
 **/
/* 普通状态 */
.my-container { width: 640px; height: 360px; }

/* Mozilla草案 (有中划线) */
.my-container:full-screen { width:100%; height:100%;}

/* W3C草案 (无中划线) */
.my-container:fullscreen { width:100%; height:100%;}

/* 当前可用的供应商前缀 */
.my-container:-webkit-full-screen,.my-container:-moz-full-screen { width:100%; height:100%; }

嵌入元素的全屏

当你使用Flash的<object>、<embed>从其他站点嵌入内容（比如一个YouTuBe视频）是，你可以指定是否允许它们全屏。这个特性也通过allowFullScreen属性添加到<iframe>标签。代码如下：


<!-- 允许使用全屏命令的外部内容 -->
<iframe src=http://anothersite.com/video/123 width=640 height=360 allowFullScreen=allowFullScreen></iframe>

API