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