web-dev-qa-db-ja.com

フルスクリーンモードでWebサイトを実行する

私は自分のウェブサイトを人の手を介さずにフルスクリーンモードにするコツを探しています。

HTML5の手法を使用したいくつかの例を見つけましたが、そのすべては人間の相互作用によって引き起こされる必要があります。

このウェブサイトはテレビに表示されます...

私はすでにフルスクリーンモードでSWFファイルを使用してウェブサイトを読み込むと思いますが、この方向に行くのではなく、デフォルトパターン（html、css、javascript）のみを使用してすべての可能性を強調したいと思います

javascripthtml5fullscreen
19
Marcio Barroso

force Webサイトをフルスクリーンモードで表示することはできません。

可能であれば、セキュリティ上の懸念を想像してください。
。

All JSフルスクリーンAPIの場合、次のようなエラーがスローされます。
"Failed to execute 'requestFullScreen' on 'Element': API can only be initiated by a user gesture."コードから単純に呼び出そうとした場合。

Flashがフルスクリーンに移行するにはユーザーの操作を必要とするという点で、Flashも似ていると思います。そうしないと、閉じることがほぼ不可能なフルスクリーンポップアップがかなりの割合で表示されます。

25
Cerbrus

その他の回答では、ブラウザーに依存しない方法でフルスクリーンに移行する方法を既に説明しています。ただし、ユーザーとの対話が必要な問題は残っています。

セキュリティ上の理由から、ウェブページを強制的にフルスクリーンモードで表示することはできません。そのためには、ユーザーの操作が必要です。

また、ブラウザは、ユーザーが同じWebサイトであっても別のページに移動するたびにフルスクリーンモードを終了します。フルスクリーンモードに戻るには、すべてのページで「ユーザーインタラクション」を実行する必要があります。
これが、フルスクリーンにしたい場合にあなたのウェブサイトが単一のページでなければならない理由です。

それが私がお勧めすることです：hidden iFrameが表示されている単一のスプラッシュページを使用します。

ユーザーがどこかをクリックするか、キーを押すたびに、このiFrameをフルスクリーンに設定して表示します。フルスクリーンモードを終了するイベントを受信したら、iFrameを再度非表示にしてスプラッシュを表示します。

リンクはデフォルトで同じフレームで開くため、ユーザーが明示的に離れるか、一部のリンクが新しいタブで開くまで、フルスクリーンモードのままになります。

Chromeで機能する例を次に示します。
（ 実際の動作を参照してください。 他の回答を使用して、ブラウザに依存しないようにします。）

<html>
<head>
    <script language="jscript">
        function goFullscreen() {
            // Must be called as a result of user interaction to work
            mf = document.getElementById("main_frame");
            mf.webkitRequestFullscreen();
            mf.style.display="";
        }
        function fullscreenChanged() {
            if (document.webkitFullscreenElement == null) {
                mf = document.getElementById("main_frame");
                mf.style.display="none";
            }
        }
        document.onwebkitfullscreenchange = fullscreenChanged;
        document.documentElement.onclick = goFullscreen;
        document.onkeydown = goFullscreen;
    </script>
</head>
<body style="margin:0">
    <H1>Click anywhere or press any key to browse <u>Python documentation</u> in fullscreen.</H1>
    <iframe id="main_frame" src="https://docs.python.org" style="width:100%;height:100%;border:none;display:none"></iframe>
</body>
</html>

ただし、ウェブサイトでは埋め込みが許可されないことが多いことに注意してください。 iframe内に表示されています。この例では、最初にPython docsではなくW3Schools Webサイトを使用しましたが、 'X-Frame-Options'ヘッダーを 'sameorigin'（クロスサイト埋め込みを許可しない）に設定し、動作を停止しました。

追伸ブラウザで本格的なOSをシミュレートするアイデアが好きで、フルスクリーンではさらに良いです！ :) OSを変更してください！
また、私はウェブ開発者でもありません。この質問は調査するのが面白いだろうと思った。

8
EvgEnZh

https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode で説明されているように、requestFullScreen（）メソッドを使用できる場合があります。

注：これにはユーザー入力が必要ですが、フラッシュの使用は避けてください。

function toggleFullScreen() {
  if (!document.fullscreenElement &&    // alternative standard method
      !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement ) {  // current working methods
    if (document.documentElement.requestFullscreen) {
      document.documentElement.requestFullscreen();
    } else if (document.documentElement.msRequestFullscreen) {
      document.documentElement.msRequestFullscreen();
    } else if (document.documentElement.mozRequestFullScreen) {
      document.documentElement.mozRequestFullScreen();
    } else if (document.documentElement.webkitRequestFullscreen) {
      document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
    }
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    }
  }
}

toggleFullScreen();

これにより、ページを全画面表示できるようになります。また、javascriptページでページを読み込むことでページをアクティブにすることもできます。ただし、古いブラウザはサポートされていません。

4
Kami

同様のことをする必要があるときは、スプラッシュスクリーンを使用しました。フルスクリーンモードに進むボタンは、JSポップの属性としてそれを要求しました。

 onClick="window.open('pageName.html', 'test', 'fullscreen=yes')"

これは完全な保証ではありませんが、私が見つけた他のどの方法よりもうまく機能しました。ユーザーの操作なしではこれを実行できない可能性が高いため、スプラッシュスクリーンのようなものを使用すると、より一般的に受け入れられるものへの侵入を最小限に抑えることができます。

2
Nicholas

これはOPが探していたものとはまったく異なりますが、私の特定の状況では、キオスクモードと動的なスタイリングの組み合わせが機能することがわかりました。

特定のURLでブラウザーを起動し、全画面モードで起動することを考えていました。ユースケースは、製造工場の端末でユーザーがステータス画面を操作することはほとんど、またはまったくありません。電源投入後、インタラクションなしでステータスのみを表示する必要があります（つまり、ユーザーがインタラクションしない限り、構成UI要素は一切表示されません）。

おそらく、複雑なサイトでは現実的ではありませんが、特定の「ペイン」（この場合はdiv）要素を使用しました。特定のdivに焦点を合わせるために、他のdivを隠し、それに応じてスタイルを設定しました。フルスクリーンから、またはフルスクリーンに変更するためのユーザーインタラクションがある場合、（1）通常のmyElement。* requestFullScreen（）document。* exitFullscreen（）呼び出しを使用し、（2）他のdivの表示/非表示、および（3）スイッチ以下のクラス間：

.right-pane-fullscreen
{
    margin-left: 0px;
}

.right-pane-normal
{
    margin-left: 225px;
}

Chrome（キオスクモードを起動する前に実行されている他のChromeプロセスがこれを機能させないことに注意してください） Chromeブラウザをフルウィンドウで開くか、Windows 7のキオスクモードで開く

0
pigeon