Chrome全屏操作

在web开发中，需要做一个全屏的按钮，全屏整个页面，或者全屏展示某个div。Fullscreen API可以解决这个问题。

全屏API可以控制浏览器的全屏显示，让一个Element节点（以及子节点）占满用户的整个屏幕。目前各大浏览器的最新版本都支持这个API（包括IE11），但是使用的时候需要加上浏览器前缀。

本文只介绍chrome的用法(其他的浏览器没有测试)

1. 全屏整个web

/**
 * 全屏展示
 */
function fullScreen(){
  var elem = document.documentElement;
  if(!document.webkitIsFullScreen)
  {
    elem.webkitRequestFullscreen();
  }
  else
  {
    document.webkitExitFullscreen();
  }
}

2. 全屏显示div等元素

/**
 * 全屏div
 * @param elementid 要全屏的元素ID
 */
function fullScreenEle(elementid){
  //全屏div
  var elem = document.getElementById(elementid);
  if(!document.webkitIsFullScreen)
  {
    elem.webkitRequestFullscreen();
  }
  else
  {
    document.webkitExitFullscreen();
  }
}

小心: elem 是dom对象哦.

3.其他浏览器API

Standard	Blink (Chrome & Opera)	Gecko (Firefox)	Internet Explorer 11	Edge	Safari (WebKit)
Document.fullscreen	webkitIsFullScreen	mozFullScreen	-	webkitIsFullScreen	webkitIsFullScreen
Document.fullscreenEnabled	webkitFullscreenEnabled	mozFullScreenEnabled	msFullscreenEnabled	webkitFullscreenEnabled	webkitFullscreenEnabled
Document.fullscreenElement	webkitFullscreenElement	mozFullScreenElement	msFullscreenElement	webkitFullscreenElement	webkitFullscreenElement
Document.onfullscreenchange	onwebkitfullscreenchange	onmozfullscreenchange	MSFullscreenChange	onwebkitfullscreenchange	onwebkitfullscreenchange
Document.onfullscreenerror	onwebkitfullscreenerror	onmozfullscreenerror	MSFullscreenError	onwebkitfullscreenerror	onwebkitfullscreenerror
Document.exitFullscreen()	webkitExitFullscreen()	mozCancelFullScreen()	msExitFullscreen()	webkitExitFullscreen()	webkitExitFullscreen()
Element.requestFullscreen()	webkitRequestFullscreen()	mozRequestFullScreen()	msRequestFullscreen()	webkitRequestFullscreen()	webkitRequestFullscreen()

know more