在 Web 应用中实现全屏效果

随着HTML5技术和浏览器的发展，Web应用程序也能像本地应用一样实现全屏，而且现在大部分浏览器都支持全屏。Fullscreen JavaScript API让这一切变得简单，本文来探讨一下如何让Web应用程序实现全屏效果。

启动全屏模式

可以通过Fullscreen API中的requestFullScreen方法来实现。由于该方法还未标准化，因此还需要加上特定浏览器前缀。

Javascript代码



// 找到正确的方法
function launchFullScreen(element) {

if(element.requestFullScreen) {

element.requestFullScreen();
} else if(element.mozRequestFullScreen) {

element.mozRequestFullScreen();
} else if(element.webkitRequestFullScreen) {

element.webkitRequestFullScreen();
}
}

// 启动全屏模式
launchFullScreen(document.documentElement); // 整个页面

launchFullScreen(document.getElementById("videoElement"));
// 单独元素

// 找到正确的方法
function launchFullScreen(element) {
if(element.requestFullScreen) {
element.requestFullScreen();
} else if(element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if(element.webkitRequestFullScreen) {
element.webkitRequestFullScreen();
}
}

// 启动全屏模式
launchFullScreen(document.documentElement); // 整个页面
launchFullScreen(document.getElementById("videoElement")); // 单独元素

取消全屏模式

可以使用cancelFullScreen方法（也需要加上前缀）从全屏模式恢复到标准模式。

Javascript代码



function cancelFullscreen() {

if(document.cancelFullScreen) {

document.cancelFullScreen();
} else if(document.mozCancelFullScreen) {

document.mozCancelFullScreen();
} else if(document.webkitCancelFullScreen) {

document.webkitCancelFullScreen();
}
}

// 取消全屏
cancelFullscreen();

function cancelFullscreen() {
if(document.cancelFullScreen) {
document.cancelFullScreen();
} else if(document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if(document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
}

// 取消全屏
cancelFullscreen();

需要注意的是，cancelFullScreen只被文档对象调用，无需单个元素调用。

全屏属性和事件

document.fullScreenElement：当前全屏显示的元素。
document.fullScreenEnabled：判断浏览器是否支持全屏。
fullscreenchange事件：全屏状态改变事件。

fullscreenchange事件要绑定在document上，该事件仅在全屏状态改变时触发，默认没有任何动作。

Javascript代码



var fullscreenElement = document.fullScreenElement || document.mozFullScreenElement || document.webkitFullScreenElement;

var fullscreenEnabled = document.fullScreenEnabled || document.mozScreenEnabled || document.webkitScreenEnabled;

var fullscreenElement = document.fullScreenElement || document.mozFullScreenElement || document.webkitFullScreenElement;
var fullscreenEnabled = document.fullScreenEnabled || document.mozScreenEnabled || document.webkitScreenEnabled;

全屏CSS

全屏效果的CSS代码：

Css代码



/* html */
:-webkit-full-screen {
background: pink;
}
:-moz-full-screen {
background: pink;
}

/* deeper elements */
:-webkit-full-screen video {
width: 100%;

height: 100%;

}

/* html */
:-webkit-full-screen {
background: pink;
}
:-moz-full-screen {
background: pink;
}

/* deeper elements */
:-webkit-full-screen video {
width: 100%;
height: 100%;
}

简单演示：http://davidwalsh.name/demo/fullscreen.php

你也可以查看Mozilla的BananaBread演示，这是一个第一人称射击游戏，fullscreen API在该游戏中得到了完美的应用。