瀏覽器全屏之requestFullScreen全屏與F11全屏

一、簡介

　　瀏覽器全屏有兩種方式，一種是HTML5新增的requestFullscreen全屏，另一種是摁F11實現的全屏，本文將詳解兩種全屏的特點以及其實現。

二、requestFullscreen全屏

　　1、判斷是否支持全屏

　　通過判斷元素的requestFullscreen函數是否存在與document.fullscreenEnabled是否為True判斷瀏覽器是否支持全屏或啟用全屏，相容寫法為

 1    function supportfull(){
 2         var requestFullscreen =
 3             document.body.requestFullscreen ||
 4             document.body.webkitRequestFullscreen ||
 5             document.body.mozRequestFullScreen ||
 6             document.body.msRequestFullscreen;
 7         var fullscreenEnabled =
 8             document.fullscreenEnabled ||
 9             document.mozFullScreenEnabled ||
10             document.webkitFullscreenEnabled ||
11             document.msFullscreenEnabled;
12         return !!(requestFullscreen && fullscreenEnabled);
13     }

　　註意，requestFullscreen方法不存在於document對象上，並且註意字母s的大小寫

　　2、進入全屏

　　通過調用元素的requestFullscreen方法是元素進入全屏，使用時應註意：

　 （1）requestFullscreen在document對象上沒有定義。

　 （2）requestFullscreen方法只能由用戶操作觸發（如onclick事件），在onload事件中調用此方法將無效。

　 （3）當一個元素全屏時，再讓其子元素全屏是無效的，必須先退出全屏。

　 （4）返回或跳轉頁面將退出全屏。

　 （5）進入全屏的元素其父元素將不再是全屏之前的父元素，此時之前的css可能失效，:full-screen偽類可以為元素添加全屏時的樣式（使用時為了相容請加-webkit、-moz或-ms首碼）。

　　下麵給出，進入全屏的JS代碼的相容寫法：

 1     function full(el) {
 2         if (el.requestFullscreen) {
 3             el.requestFullscreen();
 4         } else if (el.mozRequestFullScreen) {
 5             el.mozRequestFullScreen();
 6         } else if (el.webkitRequestFullscreen) {
 7             el.webkitRequestFullscreen();
 8         } else if (el.msRequestFullscreen) {
 9             el.msRequestFullscreen();
10         }
11     }

　　3、獲取當前進入全屏的而元素

　　　通過document.fullscreenElement方法獲取當前全屏的元素，假設id為div1的Element當前為全屏狀態則 document.querySelector("#div1")===document.fullscreenElement，以下是獲取當前全屏元素的相容寫法：

1     function fullele() {
2         return(
3             document.fullscreenElement ||
4             document.webkitFullscreenElement ||
5             document.msFullscreenElement ||
6             document.mozFullScreenElement ||
7             null);
8     }

　　4、判斷當前是否全屏

　　通過document.fullscreenElement屬性是否為空來判斷，對於webkit內核的瀏覽器，還可以通過document.webkitIsFullScreen屬性來判斷，以下為相容寫法：

1     function isfull() {
2         return !!(document.webkitIsFullScreen || fullele());
3     }

　　5、退出全屏

　　通過document.exitFullscreen方法來退出全屏，對於不同內核的瀏覽器，方法名除了首碼不一樣外，其他地方也不一樣，以下為相容寫法

 1     function exitfull() {
 2         if (document.exitFullscreen) {
 3             document.exitFullscreen();
 4         }
 5         else if (document.mozCancelFullScreen) {
 6             document.mozCancelFullScreen();
 7         }
 8         else if (document.webkitExitFullscreen) {
 9             document.webkitExitFullscreen();
10         }
11         else if (document.msExitFullscreen) {
12             document.msExitFullscreen();
13         }
14     }

6、jQuery拓展，寫成jQuery拓展，調用將十分方便，下麵將給出一個實現：

  1 $.extend({
  2     supportfull: function () {
  3         var requestFullscreen =
  4             document.body.requestFullscreen ||
  5             document.body.webkitRequestFullscreen ||
  6             document.body.mozRequestFullScreen ||
  7             document.body.msRequestFullscreen;
  8         var fullscreenEnabled =
  9             document.fullscreenEnabled ||
 10             document.mozFullScreenEnabled ||
 11             document.webkitFullscreenEnabled ||
 12             document.msFullscreenEnabled;
 13         return !!(requestFullscreen && fullscreenEnabled);
 14     },
 15     //獲取當前全屏的元素
 16     fullele: function () {
 17         return(
 18             document.fullscreenElement ||
 19             document.webkitFullscreenElement ||
 20             document.msFullscreenElement ||
 21             document.mozFullScreenElement ||
 22             null);
 23     },
 24     //全屏，如果當前存在已經全屏的元素，則操作無效
 25     full: function (el) {
 26         if ($.isfull()) {
 27             if (el === $.fullele()) {
 28                 return;
 29             }
 30         }
 31         if (el.requestFullscreen) {
 32             el.requestFullscreen();
 33         } else if (el.mozRequestFullScreen) {
 34             el.mozRequestFullScreen();
 35         } else if (el.webkitRequestFullscreen) {
 36             el.webkitRequestFullscreen();
 37         } else if (el.msRequestFullscreen) {
 38             el.msRequestFullscreen();
 39         }
 40         return this;
 41     },
 42     //退出全屏
 43     exitfull: function () {
 44         if (document.exitFullscreen) {
 45             document.exitFullscreen();
 46         }
 47         else if (document.mozCancelFullScreen) {
 48             document.mozCancelFullScreen();
 49         }
 50         else if (document.webkitExitFullscreen) {
 51             document.webkitExitFullscreen();
 52         }
 53         else if (document.msExitFullscreen) {
 54             document.msExitFullscreen();
 55         }
 56         return this;
 57     },
 58     //是否全屏
 59     isfull: function () {
 60         return !!(document.webkitIsFullScreen || $.fullele());
 61     },
 62     //進入或取消全屏，如果當前全屏的元素不是指定的元素，則取消全屏無效
 63     togglefull: function (el, callback) {
 64         if ($.isfull()) {
 65             var fullele = $.fullele();
 66             if (el === fullele) {
 67                 $.exitfull();
 68             }
 69             return;
 70         }
 71         $.full(el);
 72         if (typeof callback == typeof $.noop) {
 73             callback(!$.isfull());
 74         }
 75         return this;
 76     }
 77 })
 78 $.fn.extend(
 79 {
 80     // 讓匹配的第一個元素全屏
 81     // 該方法應有用戶操作觸發，否則無效
 82     full: function () {
 83         if ($(this).length == 0)
 84             return;
 85         $.full(el);
 86         return this;
 87     },
 88     // 如果當前全屏的元素存在於匹配的元素集合中，則該元素會退出全屏
 89     exitfull: function () {
 90         if (isfull()) {
 91             var fullel = $.fullel();
 92             var index = $(this).index(fullel);
 93             if (index != -1) {
 94                 $.exitfull();
 95             }
 96         }
 97         return this;
 98     },
 99     // 該方法應由用戶操作觸發，只對匹配的第一個元素有效
100     togglefull: function (callback) {
101         if ($(this).length > 0) {
102             var el = $(this).first().get(0);
103             $.togglefull(el, callback);
104         }
105         return this;
106     },
107     // 為元素綁定點擊事件，以使點擊的元素進入或退出全屏
108     fullable: function (callback) {
109         $(this).on("click", function (e) {
110             $(this).togglefull(callback);
111         });
112         return this;
113     },
114 });

二、F11全屏

　　1、未完待續。。。