实现元素在浏览器中全屏

如何实现全屏

需要考虑2个问题：

1. 当前浏览器是否支持全屏
2. 想全屏的元素是否支持全屏

一、 如何判断当前元素是否能够实现全屏

function supportFullPage(element){
   
	var requestFullscreen = element.requestFullscreen
	||element.mozRequestFullScreen 
	||element.webkitRequestFullscreen
	||element.msRequestFullscreen;

	var fullscreenEnabled = document.fullscreenEnabled 
	||document.mozFullScreenEnabled 
	||document.webkitFullscreenEnabled 
	||document.msFullscreenEnabled;
	return !!(requestFullscreen && fullscreenEnabled);
}

注意点：

1. element为想要实现全屏的元素。requestFullscreen方法是绑定在全屏元素上的，而非document

二、实现全屏

function fullpage(element){
   
	if(element.requestFullscreen) {
   
	    element.requestFullscreen();
	}