封裝Html5 Fullscreen API
編輯：HTML5詳解
復制前言：
使用新的全屏 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
小編推薦
熱門推薦