[html5]HTML5全屏与退出全屏的API

翻译人员: 铁锚
原文日期: 2013年12月23日
翻译日期: 2013年12月29日
原文链接: Fullscreen API

在越来越真实的web应用程序中,JavaScript也变得越来越给力.
FullScreen API 是一个新的JavaScript API,简单而又强大. FullScreen 让我们可以通过编程的方式来向用户请求全屏显示,如果交互完成,随时可以退出全屏状态.
在线演示Demo:  Fullscreen API Example
(在此Demo中，可以Launch ,Hide ,以及Dump显示相关属性,可以通过chrome的控制台查看日志信息.)

启动全屏模式
全屏API requestFullscreen方法在一些老的浏览器里面依然使用带前缀形式的方法名,因此可能需要进行检测判断:
(带前缀,意思就是各个浏览器内核不通用.)

// 找到支持的方法, 使用需要全屏的 element 调用   
function launchFullScreen(element) {   
  if(element.requestFullscreen) {   
    element.requestFullscreen();   
  } else if(element.mozRequestFullScreen) {   
    element.mozRequestFullScreen();   
  } else if(element.webkitRequestFullscreen) {   
    element.webkitRequestFullscreen();   
  } else if(element.msRequestFullscreen) {   
    element.msRequestFullscreen();   
  }   
}   
   
   
// 在支持全屏的浏览器中启动全屏   
// 整个页面   
launchFullScreen(document.documentElement);   
// 某个元素   
launchFullScreen(document.getElementById("videoElement"));   

将需要全屏显示的DOM元素作为参数,调用此方法即可让window进入全屏状态,有时候可能需要用户同意(浏览器自己和用户交互),假若用户拒绝,则可能出现各种不完全的全屏.
如果用户同意进入全屏,那么工具栏以及其他浏览器组件会隐藏起来,使document框架的宽度和高度横跨整个屏幕.

退出全屏模式
使用 exitFullscreen 方法可以使浏览器退出全屏,返回原先的布局. 该方法在一些老的浏览器上也是支持前缀方法.

// 退出 fullscreen   
function exitFullscreen() {   
  if(document.exitFullscreen) {   
    document.exitFullscreen();   
  } else if(document.mozExitFullScreen) {   
    document.mozExitFullScreen();   
  } else if(document.webkitExitFullscreen) {   
    document.webkitExitFullscreen();   
  }   
}   
   
   
// 调用退出全屏方法!   
exitFullscreen();