# 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("退出全螢幕模式");
  }
});
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.webmix.cc/html5/6.-fullscreen/6.1-quan-ying-mu-mo-shi.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.