很實用的JS使瀏覽器進入全屏
阿新 • • 發佈:2021-07-20
目錄
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
往期文章
個人主頁
接受失敗,但不選擇放棄!