8

我正在尝试使用 Javascript 确定 Safari 是否处于全屏模式。Chrome 和 Mozilla 都使用供应商前缀版本的 document.fullscreenElement：

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

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

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

4

2 回答 2

12

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

document.webkitCurrentFullScreenElement

如您所见，它根本不符合标准，甚至不接近。

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

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

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

于 2013-08-02T00:49:36.660 回答
4

由于对此没有回应，这是我最终使用的 hack，它应该非常广泛地适用于任何人。据推测，一旦 Safari 添加了W3 标准中指定的 document.fullscreenElement，在不久的将来就不需要这样做了。

就我而言，情况是我有一个全屏按钮，我希望全屏按钮在网站全屏时变成“缩小”按钮（如 YouTube 视频）。作为其中的一部分，我已经实现了 :fullscreen 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")
}

任何人都应该可以使用此 hack。即使您没有在全屏模式下更改按钮的背景图像之类的操作，您也应该始终能够对一个元素进行一些微不足道的小 css 规则更改 - 特别是如果它实际上是不可见的，比如不可见元素的背景颜色，或者没有任何文本的元素的字体大小——并在 JavaScript 中进行测试。

于 2013-03-20T19:40:31.193 回答