Question

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

在阅读了大量文档后，浏览器如何处理某些属性仍然存在一些不一致之处。

我采用了一种“跨浏览器”方法，在中工作在Firefox和Mac / 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

将_isFullScreen功能的第1行更改为

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

诀窍（至少适用于Mac和Windows上的Firefox，Chrome和Safari）

Answer 2

点击处理程序：

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

功能：

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

  rfs.call(el);
}

请注意，请求fullScreen需要通过用户触发的事件完成，例如点击事件 - mousedown，mouseup等。

Answer 3

基于I found on Mozilla's Developer Network Webkit的功能实际拼写略有不同。

屏幕上带有小写“s”的

document.webkitRequestFullscreen。

和from W3 spec一样，它的意思是小写的“s”。

在MDN链接上，他们说：

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

使用JavaScript切换HTML5 FullScreen API

3 个答案: