有没有办法知道Safari是不是全屏的?(如document.fullscreenElement)

Question

我试图找出Safari是否在全屏模式下使用Javascript。Chrome和Mozilla都使用供应商前缀版本的document.fullscreenElement:

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

然而，这在Safari 5.1.7中不起作用-文档中没有"webkitFullscreenElement"或类似的属性。

有没有人知道，如果有一种方法来告诉Safari是否在全屏模式?

Answer 1

很难找到这个，但是你要找的属性是:

document.webkitCurrentFullScreenElement

正如你所看到的，它不符合标准，甚至不接近标准。

还值得一提的是，因为它是相关的:检查是否支持全屏模式的属性也很难找到(我仍然没有…)，所以检查支持我做:

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

作为属性将为null(或全屏元素)。

Answer 2

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

在我的例子中，情况是我有一个全屏按钮，我希望全屏按钮变成一个"收缩"按钮，当网站是全屏的(像YouTube视频)。作为其中的一部分，我已经实现了:fullscreen css选择器，以便在网站全屏时将我的按钮转换为"收缩"按钮。

我意识到Safari尊重:-webkit-全屏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中测试。

Answer 3

更新2022。我发现这适用于Safari - 'webkitIsFullScreen'。

所以下面的代码片段似乎涵盖了大多数浏览器:

// Check Fullscreen
function check_fullscreen() {
  if (document.fullscreenElement || document.webkitIsFullScreen || document.mozFullScreen) { 
    // document is fullscreen
  }
  else { 
    // document is not fullscreen
  }
}