在 Web 应用中实现全屏效果

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

启动全屏模式

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

Javascript代码

1. // 找到正确的方法
2. function launchFullScreen(element) {
3. if(element.requestFullScreen) {
4. element.requestFullScreen();
5. } else if(element.mozRequestFullScreen) {
6. element.mozRequestFullScreen();
7. } else if(element.webkitRequestFullScreen) {
8. element.webkitRequestFullScreen();
9. }
10. }
12. // 启动全屏模式
13. launchFullScreen(document.documentElement); // 整个页面
14. 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代码

1. function cancelFullscreen() {
2. if(document.cancelFullScreen) {
3. document.cancelFullScreen();
4. } else if(document.mozCancelFullScreen) {
5. document.mozCancelFullScreen();
6. } else if(document.webkitCancelFullScreen) {
7. document.webkitCancelFullScreen();
8. }
9. }
11. // 取消全屏
12. 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代码

1. var fullscreenElement = document.fullScreenElement || document.mozFullScreenElement || document.webkitFullScreenElement;
2. 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代码

1. /* html */
2. :-webkit-full-screen {
3. background: pink;
4. }
5. :-moz-full-screen {
6. background: pink;
7. }
9. /* deeper elements */
10. :-webkit-full-screen video {
11. width: 100%;
12. height: 100%;
13. }

/* 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在该游戏中得到了完美的应用。