Chrome 为 cancelFullScreen 和 webkitCancelFullScreen 返回 undefined

Question

我编写了一个简单的函数来在 Web 应用程序上切换全屏模式。该应用程序只需要在 Chrome 中运行（最终部署在 Kiosk 模式下），但 cancelFullScreen 和 webkitCancelFullScreen 似乎有一些奇怪的行为。

例如，这里是精简的toggleFullScreen 函数：

var _isFullscreen = false;

function toggleFullScreen()
{
    var doc = document.documentElement,
        state = _inFullscreen,
        requestFunc = (doc.requestFullScreen || doc.webkitRequestFullScreen),
        cancelFunc = (doc.cancelFullScreen || doc.webkitCancelFullScreen);

    _inFullscreen = !(state);

    (!state) ? requestFunc.call(doc) : cancelFunc.call(doc);
}

由于某些奇怪的原因，Chrome 总是报告 cancelFunc 是 undefined，即使 requestFunc 工作正常。

谁能解释这个原因，以及可能的解决方案（不需要 jQuery 或类似的库插件）？

Answer 1

在@Tom Chung 的帮助下，在玩了一圈之后，发现cancelFullScreen（同样webkitCancelFullScreen 需要在document 上调用，而requestFullscreen 需要在document.documentElement 上调用.

因此，更新后的代码如下：

function toggleFullScreen()
{
 var doc = document.documentElement,
 state = (document.webkitIsFullScreen || document.isFullScreen),
 requestFunc = (doc.requestFullscreen || doc.webkitRequestFullScreen),
 cancelFunc = (document.cancelFullScreen || document.webkitCancelFullScreen);

 (!state) ? requestFunc.call(doc) : cancelFunc.call(document);
}

Answer 2

我是H5P 的开发人员之一，它支持所有支持它的浏览器的全屏。下面我复制了退出全屏所需的部分代码。

首先我们需要弄清楚浏览器前缀

var fullScreenBrowserPrefix;

// Detect if we support fullscreen, and what prefix to use.
if (document.documentElement.requestFullScreen) {
  /**
   * Browser prefix to use when entering fullscreen mode.
   * undefined means no fullscreen support.
   * @member {string}
   */
  fullScreenBrowserPrefix = '';
}
else if (document.documentElement.webkitRequestFullScreen) {
  var safariBrowser = navigator.userAgent.match(/Version\/(\d)/);
  safariBrowser = (safariBrowser === null ? 0 : parseInt(safariBrowser[1]));

  // Do not allow fullscreen for safari < 7.
  if (safariBrowser === 0 || safariBrowser > 6) {
    fullScreenBrowserPrefix = 'webkit';
  }
}
else if (document.documentElement.mozRequestFullScreen) {
  fullScreenBrowserPrefix = 'moz';
}
else if (document.documentElement.msRequestFullscreen) {
  fullScreenBrowserPrefix = 'ms';
}

下面是调用正确退出全屏功能的代码：

if (fullScreenBrowserPrefix === '') {
  document.exitFullscreen();
}
else if (fullScreenBrowserPrefix === 'moz') {
  document.mozCancelFullScreen();
}
else {
  document[fullScreenBrowserPrefix + 'ExitFullscreen']();
}

代码复制自https://github.com/h5p/h5p-php-library/blob/master/js/h5p.js

Answer 3

function toggleFullScreen()
{
 //Post author DID NOT provide standards-compliant method at all.
 //Standards compliant approaches should detect first.
 //Prefixes are eventually removed / performance.

 if ()//standards here
 {
  //standards here
 }
 else if (document.documentElement.webkitRequestFullScreen)
 {
  document.documentElement.webkitRequestFullScreen();
 }
 else if (document.webkitCancelFullScreen)
 {
  document.webkitCancelFullScreen();
 }
}

不确定为什么 document.documentElement.webkitCancelFullScreen 未定义。

也许（我猜）原因是全屏效果只能同时启动一次。

但是，document.documentElement.webkitRequestFullScreen 是必需的，因为 document.documentElement 给出了要全屏显示的元素。

在http://jsfiddle.net/8mVBK/16/show/完美工作

更新。

http://jsfiddle.net/8mVBK/17/