通常在某些情況下，我們需要讓瀏覽器開啟全屏模式，以便獲得更好的視覺體驗，先看下全屏模式簡單的幾個API。
瀏覽器預設繫結
非全屏模式下， document的F11按鍵繫結開啟全屏模式
全屏模式下， document的esc和F11 按鍵繫結關閉全屏模式
螢幕全屏模式改變事件
當成功進入全屏模式後， document會收到一個fullscreenchange 事件。 當退出全屏狀態後， document又會收到fullscreenchange 事件。
|
1 |
var screenChange = 'webkitfullscreenchange' || 'mozfullscreenchange' || 'fullscreenchange' |
判斷當前是否處於全屏狀態
非標準：
|
1 |
var isFullScreen = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen; |
標準：
|
1 |
var isFullScreen = document.fullscreenElement || document.mozFullScreenElement ||document.webkitFullscreenElement |
開啟全屏模式
|
1 2 3 4 5 6 7 8 9 10 11 |
function launchFullScreen(element) { if (element.requestFullscreen) { element.requestFullscreen(); } else if (element.mozRequestFullScreen) { element.mozRequestFullScreen(); } else if (element.webkitRequestFullscreen) { element.webkitRequestFullscreen(); } else if (element.msRequestFullscreen) { element.msRequestFullscreen(); } } |
注意: requestFullscreen是規範的書寫模式（ s是小寫）， 但在Gecko核心中仍使用帶字首的大寫模式mozRequestFullScreen。
關閉全屏模式
|
1 2 3 4 5 6 7 8 |
function exitFullscreen() { if (document.exitFullscreen) { document.exitFullscreen(); } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if (document.webkitExitFullscreen) { document.webkitExitFullscreen(); } |
全屏模式只能由手勢觸發
瞭解API後，假如我們監聽window.onload事件執行launchFullScreen方法，Chrome瀏覽器會提示“開啟全屏模式API只能由使用者手勢觸發”。
|
1 |
"Failed to execute 'requestFullScreen' on 'Element': API can only be initiated by a user gesture." |
原因是瀏覽器採用安全的機制， 將這種強制全屏模式意為“惡意行為”， 一切非使用者主觀意願帶來的變化都是不允許的。
因此如果你的應用有全屏需求，有兩種方案。
1.頁面初始化給使用者一個“F11開啟全屏” 的提示， 並且在延遲幾秒之後消失。
2.頁面設定一個全屏按鈕，單擊全屏按鈕進入全屏模式，並且隱藏按鈕（視覺效果最佳）。
對於第二種方案，需要監聽鍵盤事件：
|
1 2 3 4 5 6 7 8 9 10 |
document.addEventListener("keydown", function(e) { var currKey = 0 //在FireFox或Opera中，隱藏的變數e是存在的，那麼e||event返回e，如果在IE中，隱藏變數e是不存在，則返回event。 var e = e || event; //IE中，只有keyCode屬性，而FireFox中有which和charCode屬性，Opera中有keyCode和which屬性 var currKey = e.keyCode || e.which || e.charCode; if (currKey == 112) { launchFullScreen(); } }, false); |
具備了相容各種瀏覽器按鍵模式的監聽，但不知道keycode腫麼辦，112是哪個鍵？
字母和數字鍵的鍵碼值(keyCode)
| 按鍵 | 鍵碼 | 按鍵 | 鍵碼 | 按鍵 | 鍵碼 | 按鍵 | 鍵碼 |
|---|---|---|---|---|---|---|---|
| A | 65 | J | 74 | S | 83 | 1 | 49 |
| B | 66 | K | 75 | T | 84 | 2 | 50 |
| C | 67 | L | 76 | U | 85 | 3 | 51 |
| D | 68 | M | 77 | V | 86 | 4 | 52 |
| E | 69 | N | 78 | W | 87 | 5 | 53 |
| F | 70 | O | 79 | X | 88 | 6 | 54 |
| G | 71 | P | 80 | Y | 89 | 7 | 55 |
| H | 72 | Q | 81 | Z | 90 | 8 | 56 |
| I | 73 | R | 82 | 0 | 48 | 9 | 57 |
數字鍵盤上的鍵的鍵碼值(keyCode)
| 按鍵 | 鍵碼 | 按鍵 | 鍵碼 |
|---|---|---|---|
| 0 | 96 | 8 | 104 |
| 1 | 97 | 9 | 105 |
| 2 | 98 | * | 106 |
| 3 | 99 | + | 107 |
| 4 | 100 | Enter | 108 |
| 5 | 101 | – | 109 |
| 6 | 102 | . | 110 |
| 7 | 103 | / | 111 |
功能鍵鍵碼值(keyCode)
| 按鍵 | 鍵碼 | 按鍵 | 鍵碼 |
|---|---|---|---|
| F1 | 112 | F7 | 118 |
| F2 | 113 | F8 | 119 |
| F3 | 114 | F9 | 120 |
| F4 | 115 | F10 | 121 |
| F5 | 116 | F11 | 122 |
| F6 | 117 | F12 | 123 |
控制鍵鍵碼值(keyCode)
| 按鍵 | 鍵碼 | 按鍵 | 鍵碼 | 按鍵 | 鍵碼 | 按鍵 | 鍵碼 |
|---|---|---|---|---|---|---|---|
| BackSpace | 8 | Esc | 27 | Right Arrow | 39 | -_ | 189 |
| Tab | 9 | Spacebar | 32 | Dw Arrow | 40 | .> | 190 |
| Clear | 12 | Page Up | 33 | Insert | 45 | /? | 191 |
| Enter | 13 | Page Down | 34 | Delete | 46 | `~ | 192 |
| Shift | 16 | End | 35 | Num Lock | 144 | [{ | 219 |
| Control | 17 | Home | 36 | ;: | 186 | \ | 220 |
| Alt | 18 | Left Arrow | 37 | =+ | 187 | ]} | 221 |
| Cape Lock | 20 | Up Arrow | 38 | ,< | 188 | ‘“ | 222 |
避免使用非標準化的方法
非標準化的方法指的是進入草案前瀏覽器實現的一些方法，避免使用。
window.fullScreen(Firefox)
HTMLMediaElement.webkitDisplayingFullscreen
HTMLMediaElement.webkitEnterFullscreen
HTMLMediaElement.webkitExitFullscreen
HTMLMediaElement.webkitSupportsFullscreen