~~~ L O A D I N G ~~~~~ L O A D I N G ~~~~~ L O A D I N G ~~~

那些被忽略但很好用的 Web API / FullScreen

Sep 18, 2021 Max Lee

一起來延伸視野,迎接更大的畫面吧!

今天要介紹的 FullScreen API 會被忽略的原因可能是因會需要使用到它的情境比較少,但如果你撰寫網站的經驗有累積到一定程度的話,應該或多或少還是有需要它的可能性。雖然使用度沒有那麼高,不過我們還是把它整理到我們的系列文章中一起分享給大家吧。


FullScreen

FullScreen API 主要是幫我們處理全螢幕顯示的功能,大部分都會運用在影片的呈現,像是內嵌的 Youtube 影片都會內建這個功能讓使用者切換,不過如果今天影片並沒有上傳 Youtube 的打算,或是你今天想要全螢幕顯示的是其他元素時,你就可以運用這個 API。


# Document.fullscreenEnabled

這是一個唯讀屬性,用來確認目前的頁面是否允許我們開啟全螢幕顯示,所以在你操作之前,可以先確認該屬性是否為 true

絕大多數的大型企業,如 Facebook、Google 都會有自己嵌入 iframe 的政策,它們通常就會禁止你使用全螢幕來顯示。

const enabled = document.fullscreenEnabled;

# Document.fullscreen

這也是一個唯讀屬性,用來確認目前的頁面是否正處於全螢幕模式。

console.log(document.fullscreen);

# Element.requestFullscreen

這個的話就是主要用來開啟全螢幕的 API 了,這裡的 Element 代表的是 DOM 元素,所以看到這裡可以發現 FullScreen API 並沒有提供一個全域物件,FullScreen API 反而是多個不同 methods 的總稱。

要使用的話就是先選定要全螢幕的元素,然後呼叫:

const images = document.querySelectorAll("img");
images.forEach((img) => {
  img.addEventListener("click", function () {
    this.requestFullscreen();
  });
});

這邊要注意的是 requestFullscreen 不能直接在頁面載入時呼叫,如果你這麼做會接到瀏覽器的錯誤警告,API can only be initiated by a user gesture,跟你說該 API 只能被使用者的手勢觸發,也就是說我們必須要透過事件的方式處理。

另外 requestFullscreen 其實會回傳 Promise,當全螢幕顯示完畢後就會被 resolve,所以你可以做到這樣的效果:

const images = document.querySelectorAll("img");
images.forEach((img) => {
  img.addEventListener("click", function () {
    this.requestFullscreen().then(() => {
      this.src = "ugly.jpg";
    });
  });
});

# Document.exitFullscreen

有開啟全螢幕,自然就會有關閉的部分,基本上使用者可以自己按 ESC 鍵離開全螢幕模式,不過你也可以透過 exitFullscreen 來觸發這件事,例如讓 Enter 鍵也可以關閉:

document.addEventListener("keydown", function (e) {
  if (e.keyCode == 13)
    document.exitFullscreen().then(() => {
      alert(document.fullscreen);
    });
});

當然了,exitFullscreen 也是會回傳 Promise 的,可以使用 then 來串接。不過要注意 exitFullscreen 這個 method 是在 Document 底下喔!


# Document.fullscreenElement

fullscreenElement 是一個唯讀的屬性,它會指向目前正在全螢幕模式的元素。

const images = document.querySelector("img");
images.addEventListener("click", function () {
  this.requestFullscreen().then(() => {
    console.log(this === document.fullscreenElement); // true
  });
});

# 瀏覽器支援度

看完今天的介紹後,你可能覺得全螢幕是一個非常基本的功能,但其實 FullScreen API 在瀏覽器中的支援度還不是非常完整,所以當我們想要使用的時候可能要做一些額外的處理:

document.fullscreenEnabled =
  document.fullscreenEnabled || document.mozFullScreenEnabled || document.documentElement.webkitRequestFullScreen;

function requestFullscreen(element) {
  if (element.requestFullscreen) {
    element.requestFullscreen();
  } else if (element.mozRequestFullScreen) {
    element.mozRequestFullScreen();
  } else if (element.webkitRequestFullScreen) {
    element.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
  }
}

if (document.fullscreenEnabled) {
  requestFullscreen(document.documentElement);
}

目前是 IE11 和 Safari 還需要加上前綴詞,且另外 iphone 是完全不支援的,也希望之後 FullScreen API 的支援度可以越來越完善,我們前端工程師才不用寫這些冗長的 code。


- 此篇文章為「iT 邦幫忙鐵人賽」參賽文章,同步發表於 iT 邦幫忙 -

Prev Post
Next Post