瀏覽器全屏實現方式

1.利用h5的requestFullScreen

2.摁F11實現全屏效果

requestFullscreen全屏具體實現

1.進入全屏

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.有，則直接執行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調用exitFullscreen方法即可。

3.獲取當前全屏的節點

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

document.fullscreenElement()：獲取當前全屏的元素。
假設id為div1的Element當前為全屏狀態則 document.querySelector("#div1")===document.fullscreenElement

4.判斷當前是否全屏

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

5.判斷當前文檔是否能切換到全屏

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

注意事項：

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。