5.1 API 及相關說明

JS 或 CSS 相關功能，在各家瀏覽器有沒有支援，可參考 caniuse 網站。

document.fullscreenEnabled

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

若有支援，會得到 true。

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

document.fullscreenElement

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

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

element.requestFullscreen()

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

document.exitFullscreen()

退出全螢幕模式。

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

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

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

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

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

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

});

fullscreenchange 事件

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

寫法：

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