封装Html5 Fullscreen API
复制前言：
使用新的全屏 API，可以将用户的注意力导向特定元素，同时隐藏背景或转移对其他应用的注意力。因为W3C全屏规范还未达到最终版本，所以大多数浏览器供应商都使用唯一标识符为 API 添加前缀。在本例中，Microsoft 使用ms。最好是有单个函数可以请求所有前缀的全屏模式，类似于此处显示的大部分示例。若要获取更佳性能，请将 W3C API 名称放在第一，其后跟随设置前缀的版本。
先来几个或详细解释的地址吧：
http://www.zhangxinxu.com/wordpress/2012/10/html5-full-screen-api-firefox-chrome-difference/
http://www.wufangbo.com/html5-quanping/
http://heeroluo.net/article/detail/97
再来个微软开发者中心的地址：
https://msdn.microsoft.com/zh-cn/library/ie/dn265028(v=vs.85).aspx
进入，退出全屏或是否全屏事件：
// Webkit (works in Safari5.1 and Chrome 15) element.webkitRequestFullScreen(); document.webkitCancelFullScreen(); 测试环境chrome39支持document.webkitExitFullscreen() document.webkitIsFullScreen // Firefox 10+ element.mozRequestFullScreen(); document.mozCancelFullScreen(); document.mozFullScreen //ie11 element.msRequestFullscreen(); document.msExitFullscreen(); // W3C 提议 element.requestFullscreen(); document.exitFullscreen(); document.fullscreen
接下来封装代码：
!function(w,d){ var fs={ supportsFullScreen:false, isFullScreen:false, requestFullScreen:'', exitFullScreen:'', fullscreenchange:'', prefix:'' }, aP=['webkit','moz','ms'], //opera 15 支持全屏是webkit内核 len=aP.length, i=0; if(d.exitFullscreen){ fs.supportsFullScreen=true }else{ for(; i<len; i++){ if(d[aP[i]+'ExitFullscreen'] || d[aP[i]+'CancelFullScreen']){ fs.supportsFullScreen=true; fs.prefix=aP[i]; break } } } if(fs.supportsFullScreen){ var p=fs.prefix; fs.fullscreenchange=function(fn){ d.addEventListener(p=='ms' ? 'MSFullscreenChange' : p+'fullscreenchange',function(){ fn && fn() },false) }; fs.fullscreenchange(function(){ fs.isFullScreen=(function(p){ switch (p) { case '': return d.fullscreen; case 'webkit': return d.webkitIsFullScreen; case 'moz': return d.mozFullScreen; case 'ms': return d.msFullscreenElement ? true : false } })(p) }); fs.requestFullScreen=function(elem){ var elem=elem || d.documentElement; try{ p ? elem[p+'RequestFullScreen']() : elem.requestFullScreen() //chrome，ff，标准 }catch(e){ elem[p+'RequestFullscreen']() //elem.msRequestFullscreen } }; fs.exitFullScreen=function(){ try{ p ? d[p+'ExitFullscreen']() : d.exitFullscreen() //ie，新版chrome或标准 }catch(e){ d[p+'CancelFullScreen']() //老版chrome 火狐 } } } w.fs=fs }(window,document);
使用方法：
<body>
<div id="launch">进入全屏</div>
</body>
var oBtn=document.getElementById('launch');
oBtn.onclick=function(){
if(fs.supportsFullScreen){
fs.isFullScreen ?
(fs.exitFullScreen(), this.innerHTML='进入全屏') :
(fs.requestFullScreen(), this.innerHTML='退出全屏')
}else{
alert('Sorry: Your browser does not support fullScreen preview.')
}
};
fs.fullscreenchange(function(){
oBtn.innerHTML = fs.isFullScreen ? '退出全屏' : '进入全屏'
})
兼容性：
http://caniuse.com/#feat=fullscreen
