HTML5 <fullscreen全屏API>

/**
 * @Title: HTML5 fullscreen全屏API
 * @author Andseny
 * @date 2016年12月12日
 * @version   1.0
 * 使用说明:
 * fullscreen API 接口
 * 属性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(){
	//屏幕改变模式时,执行的代码
	//退出全屏执行的代码
	if(fullscreenElement()==""||fullscreenElement()==null){
		//退出全屏或者全屏状态下点击ESC键时执行
	}
});
document.addEventListener('webkitfullscreenchange', function(){
	//屏幕改变模式时,执行的代码
});

document.addEventListener('mozfullscreenchange', function(){
	//屏幕改变模式时,执行的代码
});

document.addEventListener('MSFullscreenChange', function(){
	//屏幕改变模式时,执行的代码
});

/*各浏览器fullscreenerror 事件处理*/
document.addEventListener('fullscreenerror', function(){
	/*全屏失败代码*/ 
});
document.addEventListener('webkitfullscreenerror', function(){
	/*全屏失败代码*/ 
});
document.addEventListener('mozfullscreenerror', function(){
	/*全屏失败代码*/ 
});
document.addEventListener('MSFullscreenError', function(){
	/*全屏失败代码*/ 
});

/*跨浏览器全屏模式下样式代码*/
<style type="text/css">
	:-webkit-full-screen { }
	:-moz-full-screen { }
	:-ms-fullscreen { }
	:fullscreen { }
</style>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值