DOM全屏Api requestFullscreen

最新推荐文章于 2026-01-28 09:50:03 发布

原创最新推荐文章于 2026-01-28 09:50:03 发布 · 2.9w 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#Fullscreen

JavaScript 专栏收录该内容

29 篇文章

订阅专栏

本文深入讲解了全屏API的使用方法，包括如何设置全屏、退出全屏，以及如何监听全屏状态变化。同时，文章还介绍了全屏状态下的CSS应用，帮助开发者更好地控制全屏模式下的页面布局。

设置全屏

/**
* [requestFullScreen 设置全屏]
*/
function requestFullScreen(id) {
	var de = document.getElementById(id);
	if (de.requestFullscreen) {
		de.requestFullscreen();
	} else if (de.mozRequestFullScreen) {
		de.mozRequestFullScreen();
	} else if (de.webkitRequestFullScreen) {
		de.webkitRequestFullScreen();
	}
}

退出全屏

/**
* [exitFullscreen 退出全屏]
*/
function exitFullscreen(id) {
	var de = document.getElementById(id);
	if (de.exitFullscreen) {
		de.exitFullscreen();
	} else if (de.mozCancelFullScreen) {
		de.mozCancelFullScreen();
	} else if (de.webkitCancelFullScreen) {
		de.webkitCancelFullScreen();
	}
}

属性

fullscreenElement

 var fullscreenElement = document.fullscreenElement    ||
                                document.mozFullScreenElement ||
                                document.webkitFullscreenElement;

fullscreenElement属性返回正处于全屏状态的Element节点，如果当前没有节点处于全屏状态，则返回null

fullscreenEnabled

var fullscreenEnabled = document.fullscreenEnabled       ||
                                document.mozFullScreenEnabled    ||
                                document.webkitFullscreenEnabled ||
                                document.msFullscreenEnabled;
 
        if (fullscreenEnabled) {
            setFullscreen();
        } else {
            console.log('浏览器当前不能全屏');
        }

fullscreenEnabled属性返回一个布尔值，表示当前文档是否可以切换到全屏状态。

判断全屏

fullscreenchange // 浏览器进入或离开全屏时触发。

document.addEventListener('fullscreenchange', function(){});
 
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(){});

全屏状态下的CSS

:-webkit-full-screen {
     /* properties */
}
 
:-moz-full-screen {
     /* properties */
}
 
:-ms-fullscreen {
     /* properties */
}
 
:full-screen { /*pre-spec */
     /* properties */
}
 
:fullscreen { /* spec */
     /* properties */
}
 
/* deeper elements */
video:-webkit-full-screen {
     width: 100%;
     height: 100%;
}

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