使用 JavaScript 切换 HTML5 FullScreen API

HTML5 FullScreen API toggle with JavaScript

提问by kyeno

I am trying to make a button that would toggle (on/off) HTML5 fullscreen on a certain website.

我正在尝试制作一个按钮，可以在某个网站上切换（开/关）HTML5 全屏。

After reading plenty of documentation, it appears there still are some inconsistencies among how browsers treat certain properties for it.

在阅读了大量文档后，浏览器对其某些属性的处理方式似乎仍然存在一些不一致之处。

I went for kind of "cross-browser" approach which doeswork in Firefox and Safari/MacOS, partially works in Safari/Windows and totally fails to work in Chrome and Opera.

我采用了一种“跨浏览器”方法，它在 Firefox 和 Safari/MacOS 中有效，在 Safari/Windows 中部分有效，在 Chrome 和 Opera 中完全无效。

Some castrated code snippets:

一些阉割的代码片段：

// 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);
}

采纳答案by kyeno

Changing the 1st line of _isFullScreenfunction to

将第一行_isFullScreen函数更改为

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

Does the trick (at least for Firefox, Chrome and Safari on Mac and Windows)

有没有用（至少对于 Mac 和 Windows 上的 Firefox、Chrome 和 Safari）

回答by nicholaswmin

Click Handler:

单击处理程序：

$("#toolFullScreen").click(function() {
    goFullScreen();
});

Function:

功能：

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

  rfs.call(el);
}

---

---

Keep in mind that requesting fullScreenneeds to be done via a user-triggered event such as a click event- mousedown,mouseupetc..

请记住，请求fullScreen需要通过用户触发的事件来完成，如单击事件- mousedown，mouseup等。

回答by Turnerj

Based on what I found on Mozilla's Developer Networkthe function for Webkit is actually spelt slightly different.

根据我在 Mozilla 的开发人员网络上发现的内容，Webkit 的功能实际上拼写略有不同。

document.webkitRequestFullscreenwith a lowercase "s" for screen.

document.webkitRequestFullscreen屏幕用小写的“s”。

And from W3 spec, it is meant to be with a lowercase "s".

而从W3规范，它意味着是一个小写字母“S”。

On the MDN link they say:

在 MDN 链接上，他们说：

Note: The specification uses the label, "Fullscreen" as in "requestFullscreen" or "fullscreenEnabled" - without a capital 's'. The implementation described here and other prefixed implementations may use a capital 'S'.

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