> For the complete documentation index, see [llms.txt](https://docs.webmix.cc/html5/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.webmix.cc/html5/6.-fullscreen/6.1-quan-ying-mu-mo-shi.md).

# 5.1 API 及相關說明

JS 或 CSS 相關功能，在各家瀏覽器有沒有支援，可參考 [caniuse](https://caniuse.com/#search=fullscreenEnabled) 網站。

## document.fullscreenEnabled

判斷目前瀏覽器是否有支援全螢幕模式。

若有支援，會得到 **`true`**。

若沒有支援，會得到 **`undefined`**，因為不會有 fullscreenEnabled 屬性。

## document.fullscreenElement

取得目前進入全螢幕模式的元素。

如果回傳的是 `null`，那就代表目前沒有任何元素進入全螢幕模式。

## element.requestFullscreen()

「**element**」 指的是頁面上的任何元素節點，然後透過 `requestFullscreen()` 方法，讓該元素進入全螢幕模式。

## document.exitFullscreen()

退出全螢幕模式。

## 練習：進入/退出 全螢幕模式

先建立 `html5/fullscreen` 資料夾，並在該資料夾中建立 `fullscreen.html` 檔案。原始碼如下 codepen：

(註：無法在 CodePen 中使用網頁全螢幕，因為無法針對 html 標籤設定 id，所以需在實際的網頁測試)

{% embed url="<https://codepen.io/carlos411/pen/QWMPpxP>" %}

## 注意事項：全螢幕模式需由使用者來觸發

因為全螢幕模式必需是反應在使用者的行為上(例如點擊某個按鈕)。所以如果是在載入頁面時，直接想要進入全螢幕模式的話，就會報錯。例：

```javascript
window.addEventListener("load", function(){
  
  // ... 這邊是原來的程式碼 ...
    
  var element_html = document.getElementById("the_html");
  element_html.requestFullscreen(); // 這行會報錯

});
```

## fullscreenchange 事件

該事件綁定在 document 物件上，當進入或退出全螢幕模式時，該事件會觸發。

寫法：

```javascript
document.addEventListener("fullscreenchange", function(){
  //console.log(document.fullscreenElement);
  if(document.fullscreenElement){
    console.log("進入全螢幕模式");
  }else{
    console.log("退出全螢幕模式");
  }
});
```