使用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）