jQuery设置网页全屏功能

最新推荐文章于 2025-09-24 09:07:14 发布

原创最新推荐文章于 2025-09-24 09:07:14 发布 · 6.2k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#页面全屏

jQuery 专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了HTML5中实现全屏模式的方法，包括使用F11快捷键和requestFullScreen API来设置DOM元素进入全屏状态的过程。同时，区分了document.body与document.documentElement在全屏操作中的不同作用。

<img id="alarm-fullscreen-toggler" src="#" alt="全屏按钮" />

// 设置全屏：目前这个方法无法监听 ESC 键盘按键
$('#alarm-fullscreen-toggler').on('click', function (e) {
	var element = document.documentElement;		// 返回 html dom 中的root 节点 <html>
	if(!$('body').hasClass('full-screen')) {
		$('body').addClass('full-screen');
		$('#alarm-fullscreen-toggler').addClass('active');
		// 判断浏览器设备类型
		if(element.requestFullscreen) {
			element.requestFullscreen();
		} else if (element.mozRequestFullScreen){	// 兼容火狐
			element.mozRequestFullScreen();
		} else if(element.webkitRequestFullscreen) {	// 兼容谷歌
			element.webkitRequestFullscreen();
		} else if (element.msRequestFullscreen) {	// 兼容IE
			element.msRequestFullscreen();
		}
	} else {			// 退出全屏
		console.log(document);
		$('body').removeClass('full-screen');
		$('#alarm-fullscreen-toggler').removeClass('active');
		//	退出全屏
		if(document.exitFullscreen) {
			document.exitFullscreen();
		} else if (document.mozCancelFullScreen) {
			document.mozCancelFullScreen();
		} else if (document.webkitCancelFullScreen) {
			document.webkitCancelFullScreen();
		} else if (document.msExitFullscreen) {
			document.msExitFullscreen();
		}
	}
});

全屏模式有两种：

F11 快捷键：把浏览器地址隐藏的全屏
h5的全屏 api (requestFullScreen)：设置需要全屏的 DOM 元素

document.body与document.documentElement的区别：
3. document.body：返回htmlDOM中的body节点，即<body>
4. document.documentElement：返回html DOM 中的 root 节点，即<html>