使用 JavaScript 切換 HTML5 FullScreen API

Question

我正在嘗試制作一個按鈕，可以在某個網站上切換（開/關）HTML5 全屏。

在閱讀了大量文檔后，瀏覽器對其某些屬性的處理方式似乎仍然存在一些不一致之處。

我選擇了一種“跨瀏覽器”方法，它在 Firefox 和 Safari/MacOS 中工作，在 Safari/Windows 中部分工作，在 Chrome 和 Opera 中完全無法工作。

一些閹割的代碼片段：

// class init
initialize: function() {

    this.elmButtonFullscreen = $('fullscreen');
    this.elmButtonFullscreen.on('click', this.onClickFullscreen.bindAsEventListener(this));
},

// helper methods
_launchFullScreen: function(element) {

    if(element.requestFullScreen) { element.requestFullScreen(); }
    else if(element.mozRequestFullScreen) { element.mozRequestFullScreen(); }
    else if(element.webkitRequestFullScreen) { element.webkitRequestFullScreen(); }
},
_cancelFullScreen: function() {

    if(document.cancelFullScreen) { document.cancelFullScreen(); }
    else if(document.mozCancelFullScreen) { document.mozCancelFullScreen(); }
    else if(document.webkitCancelFullScreen) { document.webkitCancelFullScreen(); }
},
_isFullScreen: function() {

    fullScreen = document.fullscreenEnabled || document.mozFullscreenEnabled || document.webkitFullscreenEnabled ? true : false;
    if(this.debug) console.log('Fullscreen enabled? ' + fullScreen);
    return fullScreen;
},

// callbacks
onClickFullscreen: function(e) {

    e.stop();
    if(this._isFullScreen()) this._cancelFullScreen();
    else this._launchFullScreen(document.documentElement);
}

Answer 1

function goFullScreen() {
  const el = document.documentElement,
      rfs = el.requestFullScreen
        || el.webkitRequestFullScreen
        || el.mozRequestFullScreen
        || el.msRequestFullscreen

  rfs.call(el)
}

document.querySelector('#full-screen-button')
  .addEventListener('click', () => {
    goFullScreen()
  })

請記住，請求fullScreen需要通過用戶觸發的事件來完成，例如單擊事件- mousedown 、 mouseup等。

Answer 2

將_isFullScreen函數的第一行更改為

fullScreen = document.fullscreenEnabled || document.mozFullscreenEnabled || document.webkitFullscreenEnabled ? true : false;

有沒有用（至少對於 Mac 和 Windows 上的 Firefox、Chrome 和 Safari）

Answer 3

根據我在 Mozilla 的開發人員網絡上發現的內容，Webkit 的功能實際上拼寫略有不同。

document.webkitRequestFullscreen用小寫的“s”表示屏幕。

從 W3 規范來看，它意味着使用小寫的“s”。

在 MDN 鏈接上，他們說：

注意：規范使用標簽“Fullscreen”，如“requestFullscreen”或“fullscreenEnabled”——沒有大寫的“s”。 此處描述的實現和其他帶前綴的實現可能使用大寫的“S”。