很实用的JS使浏览器进入全屏

目录1，前言2，兼容性3，API介绍4，具体方法1，前言发现了一个很好用的全屏API，是HTML5自带的方法，记录一下2，兼容性3，API介绍Document.exitFullscreen()，用于让当前文档退出全屏模式Element.requestFullscreen()，用于发出异步请求使元素进入全屏模式不仅如此，浏览器的伪类:fullscreen，应用于当前处于全屏显示模式的元素，它不仅仅选

鹏多多

7249人浏览 · 2021-07-20 09:41:15

鹏多多 · 2021-07-20 09:41:15 发布

1，前言

发现了一个很好用的全屏API，是HTML5自带的方法，记录一下

2，兼容性

兼容性

3，API介绍

Document.exitFullscreen()，用于让当前文档退出全屏模式

Element.requestFullscreen()，用于发出异步请求使元素进入全屏模式

不仅如此，浏览器的伪类:fullscreen，应用于当前处于全屏显示模式的元素，它不仅仅选择顶级元素，还包括所有已显示的栈内元素。

语法

#fullscreen:fullscreen {
  background-color: pink;
}

4，具体方法

changeFullScreen() {
	const element = document.documentElement
	// 如果是全屏状态
	if (this.fullscreen) {
		// 如果浏览器有这个Function
		if (document.exitFullscreen) {
			document.exitFullscreen()
		} else if (document.webkitCancelFullScreen) {
			document.webkitCancelFullScreen()
		} else if (document.mozCancelFullScreen) {
			document.mozCancelFullScreen()
		} else if (document.msExitFullscreen) {
			document.msExitFullscreen()
		}
	} else {
		// 如果浏览器有这个Function
		if (element.requestFullscreen) {
			element.requestFullscreen()
		} else if (element.webkitRequestFullScreen) {
			element.webkitRequestFullScreen()
		} else if (element.mozRequestFullScreen) {
			element.mozRequestFullScreen()
		} else if (element.msRequestFullscreen) {
			element.msRequestFullscreen()
		}
	}
	// 判断全屏状态的变量
	this.fullscreen = !this.fullscreen
}