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

1.利用h5的requestFullScreen

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

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

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.有队萤，則直接執(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(document.msExitFullscreen) {
        document.msExitFullscreen();
    }
}

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

3.獲取當前全屏的節(jié)點

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

document.fullscreenElement()：獲取當前全屏的元素。
假設(shè)id為div1的Element當前為全屏狀態(tài)則 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方法只能由用戶觸發(fā)捣炬，比如：在onload事件中不能觸發(fā)
3.頁面跳轉(zhuǎn)需先退出全屏
4.進入全屏的元素溶弟，將脫離其父元素，所以可能導致之前某些css的失效
解決方案：使用 :full-screen偽類 為元素添加全屏時的樣式（使用時為了兼容注意添加-webkit蒲稳、-moz或-ms前綴）
5.一個元素A全屏后氮趋，其子元素要再全屏，需先讓元素A退出全屏