jQuery设置网页全屏功能

最新推荐文章于 2024-05-09 09:36:38 发布

①条咸鱼

最新推荐文章于 2024-05-09 09:36:38 发布

阅读量6k

点赞数

分类专栏： jQuery 文章标签：页面全屏

本文链接：https://blog.csdn.net/C_hydar/article/details/88552145

版权

jQuery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<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>

①条咸鱼

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
jQuery设置网页全屏功能

&lt;img id="alarm-fullscreen-toggler" src="#" alt="全屏按钮" /&gt;// 设置全屏：目前这个方法无法监听 ESC 键盘按键$('#alarm-fullscreen-toggler').on('click', function (e) { var element = document.documentElement; // 返回 ht...
复制链接

扫一扫