有沒有辦法判斷Safari是否全屏？ （例如document.fullscreenElement）

Question

我想知道Safari是否處於使用Javascript的全屏模式。 document.fullscreenElement的瀏覽器和Mozilla同時使用供應商前綴版本：

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

然而，這並不在Safari 5.1.7工作 - 沒有「webkitFullscreenElement」或類似的文件屬性。

有誰知道是否有方法可以判斷Safari是否處於全屏模式？

Answer 1

這是很難找到這一個，但你正在尋找的屬性是：

document.webkitCurrentFullScreenElement 

正如你可以看到它不符合標準，甚至還沒有接近，在所有。

另外值得一提，因爲它涉及：財產，以檢查是否支持全屏模式也很難找到（我還沒有...）所以要檢查支持我這樣做：

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

作爲屬性將爲空（或全屏元素）。

Answer 2

由於沒有對此做出任何迴應，這裏是我最終使用的黑客，它應該非常廣泛地適用於任何人。據推測，一旦Safari添加W3 standard中指定的document.fullscreenElement，在不久的將來就不需要這樣做。

就我而言，情況是我有一個全屏按鈕，並且我希望全屏按鈕在網站處於全屏狀態（如YouTube視頻）時變成「縮小」按鈕。作爲其中的一部分，我已經實現了：全屏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") 
} 

這個技巧應該是任何人都可用。即使你沒有像在全屏模式下改變按鈕的背景圖像那樣，你也應該總是能夠對一個元素做一些微小的css規則更改 - 特別是如果它實際上不可見，比如看不見的元素的背景顏色，或者沒有任何文本的元素的字體大小 - 並在JavaScript中測試。