瀏覽器全屏實(shí)現(xiàn)方式

1.利用h5的requestFullScreen

2.摁F11實(shí)現(xiàn)全屏效果

requestFullscreen全屏具體實(shí)現(xiàn)

1.進(jìn)入全屏

function full(ele) {if (ele.requestFullscreen) {ele.requestFullscreen();} else if (ele.mozRequestFullScreen) {ele.mozRequestFullScreen();} else if (ele.webkitRequestFullscreen) {ele.webkitRequestFullscreen();} else if (ele.msRequestFullscreen) {ele.msRequestFullscreen();} }

ele：要全屏的元素，可以是document.body也可以是某一個div
思路：
1.判斷該瀏覽器是否具有requestFullscreen方法
2.有，則直接執(zhí)行ele.requestFullscreen()；沒有則做瀏覽器兼容判斷。

2.exitFullScreen退出全屏

function exitFullscreen() {if(document.exitFullScreen) {document.exitFullScreen();} else if(document.mozCancelFullScreen) {document.mozCancelFullScreen();} else if(document.webkitExitFullscreen) {document.webkitExitFullscreen();} else if(element.msExitFullscreen) {element.msExitFullscreen();} }

退出全屏直接使用document調(diào)用exitFullscreen方法即可。

3.獲取當(dāng)前全屏的節(jié)點(diǎn)

function getFullscreenElement() {return ( document.fullscreenElement ||document.mozFullScreenElement ||document.msFullScreenElement ||document.webkitFullscreenElement||null); }

document.fullscreenElement()：獲取當(dāng)前全屏的元素。
假設(shè)id為div1的Element當(dāng)前為全屏狀態(tài)則 document.querySelector("#div1")===document.fullscreenElement

4.判斷當(dāng)前是否全屏

function isFullScreen() {return !! (document.fullscreen || document.mozFullScreen || document.webkitIsFullScreen || document.webkitFullScreen || document.msFullScreen ); }

5.判斷當(dāng)前文檔是否能切換到全屏

function isFullscreenEnabled() {return (document.fullscreenEnabled ||document.mozFullScreenEnabled ||document.webkitFullscreenEnabled ||document.msFullscreenEnabled); }

注意事項(xiàng)：

1.document下沒有requestFullscreen 2.requestFullscreen方法只能由用戶觸發(fā)，比如：在onload事件中不能觸發(fā) 3.頁面跳轉(zhuǎn)需先退出全屏 4.進(jìn)入全屏的元素，將脫離其父元素，所以可能導(dǎo)致之前某些css的失效 解決方案：使用 :full-screen偽類 為元素添加全屏?xí)r的樣式（使用時為了兼容注意添加-webkit、-moz或-ms前綴） 5.一個元素A全屏后，其子元素要再全屏，需先讓元素A退出全屏

總結(jié)

以上是生活随笔為你收集整理的JS 全屏和退出全屏--requestFullScreen详解及兼容代码的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。