8

Javascriptを使用してSafariがフルスクリーンモードになっているかどうかを調べようとしています。ChromeとMozillaはどちらも、ベンダープレフィックス付きのdocument.fullscreenElementを使用しています。

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

ただし、これはSafari5.1.7では機能しません。ドキュメントに「webkitFullscreenElement」または同様のプロパティはありません。

Safariがフルスクリーンモードであるかどうかを確認する方法があるかどうか誰かが知っていますか？

4

2 に答える 2

12

これを見つけるのはかなり難しいですが、あなたが探しているプロパティは次のとおりです。

document.webkitCurrentFullScreenElement

ご覧のとおり、標準に準拠しておらず、厳密にも準拠していません。

また、関連しているので言及する価値があります：フルスクリーンモードがサポートされているかどうかを確認するプロパティも見つけるのが難しいので（私はまだ...）、サポートを確認するために私はします：

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

プロパティがnull（またはフルスクリーン要素）になるため。

于 2013-08-02T00:49:36.660 に答える
4

これに対する応答がなかったので、これが私が使用することになったハックです。これはかなり広く誰にでも適用できるはずです。SafariがW3標準で指定されたdocument.fullscreenElementを追加した後は、おそらくこれは近い将来必要になることはないでしょう。

私の場合、フルスクリーンボタンがあり、サイトがフルスクリーン（YouTubeビデオなど）のときにフルスクリーンボタンを「縮小」ボタンにしたかったのです。この一環として、サイトがフルスクリーンのときはいつでもボタンを「縮小」ボタンに変える：fullscreencssセレクターをすでに実装していました。

Safariが：-webkit-full-screencss疑似クラスを尊重していることに気づきました。したがって、ボタンの画像が「縮小」画像（疑似クラスを直接テストできない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ルールを1つの要素に変更できるはずです。非表示の要素の背景色や、テキストを含まない要素のフォントサイズなど、JavaScriptでテストします。

于 2013-03-20T19:40:31.193 に答える