属性1：fullscreenElement 该属性返回当前处于全屏模式的DOM元素。
属性2：fullscreenEnabled 该属性返回当前 document 是否进入了可以请求全屏模式的状态。
方法1：requestFullscreen() 请求进入全屏模式。
方法2：exitFullscreen() 退出全屏模式。
事件1：fullscreenchange 进入/退出全屏模式切换时会触发。
事件2：fullscreenerror 进入/退出全屏模式失败时会触发。
由于fullscreen API 存在浏览器兼容性问题，所以我们在使用的时候需要进行跨浏览器处理，参考代码：
跨浏览器返回正处于全屏的元素
function fullscreenElement(){
var fullscreenEle = document.fullscreenElement ||
document.mozFullScreenElement ||
document.webkitFullscreenElement
//注意：要在用户授权全屏后才能获取全屏的元素，否则 fullscreenEle为null
console.log("全屏元素："+fullscreenEle)
return fullscreenEle
}
跨浏览器返回当前 document 是否进入了可以请求全屏模式的状态
function fullscreenEnable(){
var isFullscreen = document.fullscreenEnabled ||
window.fullScreen ||
document.webkitIsFullScreen ||
document.msFullscreenEnabled
//注意：要在用户授权全屏后才能准确获取当前的状态
if(isFullscreen){
console.log('全屏模式')
}else{
console.log('非全屏模式')
}
}
跨浏览器发动全屏
function lanchFullscreen(element){
if(element.requestFullscreen){
element.requestFullscreen()
}
else if(element.mozRequestFullScreen){
element.mozRequestFullScreen()
}
else if(element.msRequestFullscreen){
element.msRequestFullscreen()
}
else if(element.webkitRequestFullscreen){
element.webkitRequestFullScreen()
}
}
跨浏览器退出全屏
function exitFullscreen(){
if(document.exitFullscreen){
document.exitFullscreen()
}
else if(document.mozCancelFullScreen){
document.mozCancelFullScreen()
}
else if(document.msExitFullscreen){
document.msExiFullscreen()
}
else if(document.webkitCancelFullScreen){
document.webkitCancelFullScreen()
}
}
各浏览器fullscreenchange 事件处理
document.addEventListener('fullscreenchange', function(){ /*code*/ })
document.addEventListener('webkitfullscreenchange', function(){ /*code*/})
document.addEventListener('mozfullscreenchange', function(){ /*code*/})
document.addEventListener('MSFullscreenChange', function(){ /*code*/})
各浏览器fullscreenerror 事件处理
document.addEventListener('fullscreenerror', function(){ /*code*/ })
document.addEventListener('webkitfullscreenerror', function(){ /*code*/})
document.addEventListener('mozfullscreenerror', function(){ /*code*/)
document.addEventListener('MSFullscreenError', function(){ /*code*/ })
跨浏览器全屏模式下样式代码
:-webkit-full-screen { }
:-moz-full-screen { }
:-ms-fullscreen { }
:fullscreen { }
项目中需要将后台浏览器的窗口全屏，也就是我们点击一个按钮要实现按F11全屏的效果。在HTML5中,W3C制定了关于全屏的API，就可以实现全屏幕的效果，也可以让页面中的图片，视频等全屏目前只有google
chrome
15
+,
safri5.1+,firfox10+,IE11支持
全屏
var
docElm
=
document.documentElement
//W3C
if
(docElm.requestFullscreen)
{
docElm.requestFullscreen()
}
//FireFox
else
if
(docElm.mozRequestFullScreen)
{
docElm.mozRequestFullScreen()
}
//Chrome等
else
if
(docElm.webkitRequestFullScreen)
{
docElm.webkitRequestFullScreen()
}
//IE11
else
if
(elem.msRequestFullscreen)
{
elem.msRequestFullscreen()
}
requestFullScreen。这是html5里面一个比较新的API。不同浏览器存在不同的方法前缀。需要区分。
可以对整个document进行全屏，或对某个元素全屏（比如vidio控件）
通常浏览器都会预先进行询问，比如弹出浮层让用户确认是否要全屏。只有用户确认全屏，你的全屏操作才会生效。
HTML5是近十年来Web标准最巨大的飞跃。HTML5并非仅仅用来表示Web内容，它也将Web带入一个成熟的应用平台，在这个平台上，视频，音频，动画，以及同电脑的交互都被标准化。随着HTML5的发展，各个浏览器都已经或即将支持HTML5。在大潮流的推动下，微软也表示将把HTML5作为IE9的核心，并将全力投入HTML5。
很多平时最喜欢上网看视频、玩游戏的朋友经常抱怨不爽，因为网上好多视频和游戏都需要安装Flash插件，并且速度也跟不上！HTML5的出现解决了这一难题。HTML5提供了音频视频的标准接口，实现了无需任何插件支持，只需浏览器支持相应的HTML5标签。怪不得都说HTML5是Flash的终结者！Safari5、Firefox4和Chrome6等浏览器加入了HTML5技术，可以免除Flash插件的安装直接播放视频 ！
