有没有办法判断Safari是否全屏？ （例如document.fullscreenElement）

Question

我试图通过Javascript查看Safari是否处于全屏模式。 Chrome和Mozilla都使用供应商前缀版本的document.fullscreenElement：

isFullscreen = function() {
  return document.fullscreenElement
      || document.webkitFullscreenElement
      || document.mozFullScreenElement;
}

但是，这在Safari 5.1.7上不起作用 - 文档上没有“webkitFullscreenElement”或类似属性。

有没有人知道是否有办法判断Safari是否处于全屏模式？

Answer 1

由于没有对此做出回应，这是我最终使用的黑客攻击，这应该适用于任何人。据推测，一旦Safari添加了W3 standard中指定的document.fullscreenElement，这在不久的将来就不是必需的。

在我的情况下，情况是我有一个全屏按钮，我希望全屏按钮在网站全屏时变成“缩小”按钮（如YouTube视频）。作为其中的一部分，我已经实现了：全屏css选择器，只要站点全屏，我就可以将我的按钮变成“缩小”按钮。

我意识到Safari尊重：-webkit-full-screen css伪类。因此，快速检查我的按钮的图像是“缩小”图像（AFAIK你不能直接测试伪类），如果是，我们必须全屏。

所以：

CSS：

.fullscreen-button
   background-image: fullscreen.png

/* these match if .fullscreen-button is inside a fullscreen body element
   (comma-separated selectors don't seem to work here?) */
body:fullscreen .fullscreen-button
   background-image: fullscreen-exit.png
body:-webkit-full-screen .fullscreen-button
   background-image: fullscreen-exit.png
body:-moz-full-screen .fullscreen-button
   background-image: fullscreen-exit.png

JS：

isFullscreen = function() {
  // this doesn't yet exist in Safari
  if (document.fullscreenElement
      || document.webkitFullscreenElement
      || document.mozFullScreenElement) {
    return true;
  }
  // annoying hack to check Safari
  return ~$(".fullscreen-button").css("background-image").indexOf("exit")
}

这个黑客应该可以被任何人使用。即使您没有像在全屏模式下更改按钮的背景图像那样做，也应该总是能够对一个元素进行一些微不足道的小css规则更改 - 特别是如果它实际上不可见，比如不可见元素的背景颜色，或者没有任何文本的元素的字体大小 - 并在JavaScript中对其进行测试。

Answer 2

很难找到这个，但你正在寻找的属性是：

document.webkitCurrentFullScreenElement

正如你所看到的那样，它并没有遵循标准，甚至根本没有关闭。

另外值得一提的是，它是相关的：检查是否支持全屏模式的属性也很难找到（我仍然没有......）所以要检查我的支持：

if (typeof document.webkitCurrentFullScreenElement !== 'undefined') ...

因为属性将为null（或全屏元素）。