JavaScript实现HTML5全屏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);
}

- Kyeno

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等来完成。

- nicholaswmin

Answer 2

将_isFullScreen函数的第一行改为：

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

在Mac和Windows上，Firefox、Chrome和Safari至少可以使用这个技巧（译者注：指特定操作或方法）。请注意，保留了HTML标签。

- Kyeno

---

至少在FF24中，它是mozFullScreenEnabled（屏幕带有大写字母S） - Narretz

另外需要注意的是，isFullScreen返回的是浏览器是否能够显示全屏，而不是全屏当前是否处于活动状态。您需要监听document.fullscreenElement以及其浏览器变体。 - Narretz

Answer 3

根据我在Mozilla开发者网络上找到的内容，Webkit的函数实际上拼写略有不同。

document.webkitRequestFullscreen 使用小写字母 "s" 来表示屏幕。

而来自W3规范的说明，应该使用小写字母 "s"。

在MDN链接中，他们说：

注意：规范使用标签“Fullscreen”，如“requestFullscreen”或“fullscreenEnabled” - 没有大写's'。 这里描述的实现和其他前缀实现可能会使用大写'S'。

- Turnerj

---

感谢您的努力。我相信我以前去过那里，但这不是主要问题；Safari/Mac仍然可以在全屏模式下无问题地启动。我刚刚检查了一下，发现即使我们不处于全屏视图中，Chrome也会对document.webkitFullscreenEnabled回答“true”。有什么线索吗？ :) - Kyeno

看起来可能有一些关键线索： http://johndyer.name/native-fullscreen-javascript-api-plus-jquery-plugin/现在要进行测试。 - Kyeno

好的 - 根据我所发现的 - Chrome将document.webkitFullscreenEnabled视为“我们是否支持全屏模式？”，而document.webkitIsFullScreen则回答了“我们是否处于全屏模式？”的问题。我们喜欢浏览器的怪癖，不是吗？ :) - Kyeno

当然！进一步查看Chrome中的演示，它只能在点击事件上工作，并且从控制台调用它什么也不会发生。 - Turnerj

仅在单击事件上运行 - 这有点可以理解。想象一下，如果全屏可从常规函数调用中使用，那么过度宣传的网站可能会做什么... - Kyeno