使用JavaScript中的Fullscreen API以全屏顯示內容
有些內容只是全屏顯示，例如您網站上的選擇圖片或視頻。當我說全屏時，我的意思是占用整個用戶屏幕，沒有任何瀏覽器chrome或甚至後臺應用程序妨礙。使用Fullscreen API，只需幾行JavaScript代碼，您就可以將焦點放在您網站上任何值得信賴的內容上，比如說您對此感到非常自豪並且剛剛發布在您的旅行博客上的壯觀海岸照片（照片來源：PixaBay）：
在全屏幕中打開元素
全屏API的核心是requestFullscreen()方法，可以在文檔中的任何元素上調用它以使其成為kaboom：
|
1 2 3 4 |
><font style="vertical-align: inherit;">Var featuredimg = document.getElementById（“rockyshot”）</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
"vertical-align: inherit;"><font style="vertical-align: inherit;">
|
IE 11+支持FullScreen API，桌面上支持所有現代版Chrome和Firefox。需要註意的是，在編寫本文時，仍然需要使用前綴來訪問構成API的相關方法和事件處理程序的受支持版本。requestFullscreen()
| requestFullscreen（）（標準版） |
| webkitRequestFullscreen（） |
| mozRequestFullScreen（） |
| msRequestFullscreen（） |
跨瀏覽器requestFullscreen（）方法
跨瀏覽器全屏功能：讓我們創建一個跨瀏覽器版本， requestFullscreen()我們可以在頁面上的任何元素上使用，這樣我們每次使用它時都不會迷失在if / else語句的海洋中：
|
1 2 3 4 五 |
|
當我們打電話時getreqfullscreen()，我們會requestFullscreen()在瀏覽器中獲得支持的版本 。然後，為了調用實際方法，我們在它上面調用，通過傳入我們使用的元素進行全屏來為方法提供所需的上下文。 call()call()
示例：讓我們在CSS類“ canfullscreen” 上獲取所有圖像，以便在點擊時全屏顯示（照片來源：PixaBay）：
|
1 2 3 4 五 6 7 |
|
易如反掌！
註意：要調用requestFullscreen()文檔本身以使整個頁面全屏，使用 document.documentElement.requestFullscreen()或使用跨瀏覽器功能， globalreqfullscreen.call(document.documentElement)
退出全屏
當元素全屏放置時，默認情況下用戶可以選擇通過按“ esc ”或“ f11 ” 退出該元素。您也可以根據需要document.exitFullscreen() 和其惡魔般的兄弟姐妹一起做同樣的事情：
| document.exitFullscreen（）（標準版） |
| document.webkitExitFullscreen（） |
| document.mozCancelFullScreen（） |
| document.msExitFullscreen（） |
請註意，與requestFullscreen()每個DOM元素上存在的將其輸入全屏的exitFullscreen() 方法不同，該方法僅在document對象上定義，以在調用時將元素帶回正常空間。
跨瀏覽器退出功能：與上一節一樣， document.exitFullscreen()為方便起見，我們將創建一個返回瀏覽器支持版本的函數：
|
1 2 3 4 |
|
示例：在下文中，我們添加到上一個示例，因此雙擊任何具有CSS類“ canfullscreen”的圖像將瀏覽器返回到正常模式：
|
1 2 3 4 五 6 7 |
|
檢查全屏模式
每當瀏覽器進入全屏模式時， document.fullscreenElement對象（只讀）包含對當前顯示的目標元素的引用。null在所有其他情況下，此對象返回。
使用document.fullscreenElement，我們可以：
-
檢查瀏覽器當前是否處於全屏模式
-
檢查正在顯示的元素
document.fullscreenElement 與其他全屏API相關的方法一樣，也取決於瀏覽器：
| document.fullscreenElement（標準版） |
| document.webkitFullscreenElement |
| document.mozFullScreenElement |
| document.msFullscreenElement |
是的，這開始是一個真正的痛苦在後面，但讓我們滾動拳。
跨瀏覽器獲取全屏元素功能：使用以下函數返回支持的document.fullscreenElement對象：
|
1 2 3 4 |
|
下面檢查瀏覽器當前是否為全屏，以及圖像是否為正面和中心：
|
1 2 3 |
|
在全屏模式和常規模式之間切換元素
該document.fullscreenElement對象的常見用途是編寫在全屏模式和常規模式之間動態切換元素的代碼。
示例：為了說明，以下使用圖像上的單擊操作在全屏和常規模式之間切換，具體取決於瀏覽器當前所處的模式：
|
1 2 3 4 五 6 7 8 9 10 11 12 13 14 |
|
其他方法和事件處理程序
一些其他對象和事件處理程序完成全屏API。他們是：
-
document.fullscreenEnabled：Boolean如果頁面可用於全屏模式，則返回true。嘗試以全屏打開時，<iframe>沒有顯式allowfullscreen屬性集的窗口化插件或元素將失敗。該document.onfullscreenerror事件將觸發，而不是在那些情況下。 -
document.onfullscreenchange：每當瀏覽器進入或退出全屏模式時觸發的事件處理程序。 -
document.onfullscreenerror：當請求時瀏覽器無法進入全屏模式時觸發的事件處理程序。
是的，此時，必須使用前綴來訪問上面列出的所有內容的相應版本。他們來了：
| document.fullscreenEnabled（標準） | document.onfullscreenchange（標準） | document.onfullscreenerror（標準） |
| document.webkitFullscreenEnabled | document.onwebkitfullscreenchange | document.onwebkitfullscreenerror |
| document.mozFullScreenEnabled | document.onmozfullscreenchange | document.onmozfullscreenerror |
| document.msFullscreenEnabled | document.onmsfullscreenchange | document.onmsfullscreenerror |
要創建的跨瀏覽器版本document.onfullscreenchange和 document.onfullscreenerror，一個簡單而優雅的方法是先看看哪個版本的requestFullscreen() 方法瀏覽器支持，然後將結果映射到我們要使用的事件處理程序的相應版本。
跨瀏覽器onfullscreenchange事件：這是創建統一document.onfullscreenchange 事件處理程序的一種方法：
|
1 2 3 4 五 6 7 8 9 10 11 12 13 14 15 16 17 |
|
當我們打電話時getonfullscreenevt()，我們得到支持的“ onfullscreenchange” 版本，例如“ onwebkitfullscreenchange”。然後，為了利用這個事件字符串，我們將它與document對象，定義事件的對象相關聯，並為其分配一個函數：
|
1 2 3 4 五 |
|
請註意，document.addEventListener()當前使用不適用於“ onfullscreenchange”或“ onwebkitfullscreenchange”事件 - 它們需要直接附加到document對象。
全屏相關的CSS
您可以使用:fullscreen偽選擇器及其前綴變體在全屏模式下優化元素的外觀：
|
1 2 3 4 五 6 7 8 9 10 11 12 13 14 15 |
|
當目標元素及其子元素的樣式需要與普通模式下的默認樣式不同時，它們非常有用，例如FIGURE，您希望全屏顯示圖像的容器：
例：
夏威夷是美國的一個州，是中太平洋的一個孤立的火山群島。它的島嶼以其崎嶇的懸崖，瀑布，熱帶植物和金色，紅色，黑色甚至綠色沙灘的海灘而聞名。-Wikipedia
默認情況下，該圖的寬度為300px，子圖像跨越整個寬度。但是，在全屏模式下，我們希望數字擴展到100％; 並且所包含的圖像高度為90vh（為其下方的標題留下一些空間）。這是完成此任務的CSS：
CSS：
|
1 2 3 4 五 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 三十 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
|
結論
將某些內容顯示為全屏可能只是您需要留下深刻印象並轉換訪問者的額外“魅力”，例如電子商務網站上的產品圖片。使用全屏API，現在有一種方法可以做到這一點。
使用JavaScript中的Fullscreen API以全屏顯示內容