如何实现全屏
需要考虑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);
}
注意点:
- element为想要实现全屏的元素。requestFullscreen方法是绑定在全屏元素上的,而非document
二、实现全屏
function fullpage(element){
if(element.requestFullscreen) {
element.requestFullscreen();
}