实现元素在浏览器中全屏

如何实现全屏

需要考虑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();
	}else if(element.mozRequestFullScreen) {
      
	    //兼容moz
	    element.mozRequestFullScreen();
	}else if(element.webkitRequestFullscreen) {
     
		//兼容webkit
	    element.webkitRequestFullscreen();
	} else if (el.msRequestFullscreen) {
     
	    element.msRequestFullscreen();
	}
}

注意点：

1. requestFullscreen是绑定在需要全屏的元素上，而非document
2. 全屏必须是用户手动触发，如点击事件click。不能再onload中使用
3. 父元素全屏时，其子元素全屏是无效的

三、退出全屏

function exitFullpage(){
     
	if (document.exitFullscreen) {
     
	    document.exitFullscreen();
	}
	else if (document.mozCancelFullScreen) {
     
	    document.mozCancelFullScreen();
	}
	else if (document.webkitExitFullscreen) {
     
	    document.webkitExitFullscreen();
	}
	else if (document.msExitFullscreen) {
     
	    document.msExitFullscreen();
	}
}

四、监测全屏的变化

document.addEventListener('fullscreenchange', function(event) {
     
    changeFull(event);
});
document.addEventListener('mozfullscreenchange', function(event) {
     
    changeFull(event);
});
document.addEventListener('webkitfullscreenchange', function(event) {
     
    changeFull(event);
});
document.addEventListener('msfullscreenchange', function(event) {
     
    changeFull(event);
});

注意点：

1. changeFull()方法为进入/退出全屏时所要运行的代码

五、如何获取当前全屏的元素

function getFullelem(){
     
	return (
		document.fullscreenElement || 
		document.webkitFullscreenElement ||
		document.msFullscreenElement ||
		document.mozFullScreenElement || 
		null
	);
}

注意点：

1. 可以判断当前元素是否是全屏。

 currentElem === getFullelem()

3. webkit内核的浏览器可以通过document.webkitIsFullScreen属性来判断。

// 判断是否全屏代码
function isFull(){
     
	return !!(document.webkitIsFullScreen) || getFullelem());
}

六、修改全屏状态下的样式

在全屏状态下，大多数浏览器的css支持 :full-screen伪类。只有IE11支持 :fullscreen伪类。
使用该伪类可以对全屏状态设置单独的css属性

:-webkit-full-screen {
     
  /* properties */
}

:-moz-full-screen {
     
  /* properties */
}

:-ms-fullscreen {
     
  /* properties */
}

:full-screen {
      /*pre-spec */
  /* properties */
}

:fullscreen {
      /* spec */
  /* properties */
}

/* deeper elements */
:-webkit-full-screen video {
     
  width: 100%;
  height: 100%;
}