很實用的JS使瀏覽器進入全屏

目錄

• 1，前言
• 2，兼容性
• 3，API介紹
• 4，具體方法

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
}

如果看了覺得有幫助的，我是@鵬多多，歡迎 點贊 關注 評論；END

公眾號

往期文章

• 使用nvm管理node.js版本以及更換npm淘寶鏡像源
• 細數JS中實用且強大的操作符&運算符
• vue中利用.env文件存儲全局環境變量，以及配置vue啟動和打包命令
• 微信小程序實現搜索關鍵詞高亮

個人主頁

• CSDN
• GitHub
• 簡書
• 博客園
• 掘金