web-dev-qa-db-ja.com

javascriptでウィンドウをフルスクリーン（リアルフルスクリーン、F11機能）に設定

これについてはいくつかの質問があります。不可能だと言う人もいれば、そうだと言う人もいます IEでは可能です Internet Explorerフルスクリーンモード？ 普遍的な解決策とこれに対する答えを疑問に思います。

私はフォトギャラリーのウェブページを構築していますが、ギャラリーはフルスクリーンで見ると本当に違いがあります（タイトルにあるように、私はtrueバーとウィンドウではなくフルスクリーンについて話しますchromeなど）、フルスクリーンのボタンを配置したいと思います。 （いいえ、ユーザーの意図なしに強制的にFSに行くことはありません。そのような「機能」も嫌いです）ボタンクリックなどのユーザー開始アクションを通じてFlashで開始されると、IS可能です、そして私はそのようなものがJavascriptでも利用可能かどうか疑問に思っていました。論理的には、Flash/SLユーザーが開始したフルスクリーンモードと同様のメカニズムが必要です。すべてのために機能する「ユニバーサル」機能がない場合、部分的な機能については大丈夫です（何よりも良い）（つまりブラウザの一部をサポートそれによって、ない設定ウィンドウ幅/高さなど。ウィンドウの幅/高さを設定するように指示する答えが付属していません。私はそれを行う方法を知っています、私はそれを探していません）。

javascriptjqueryfullscreen
25
Can Poyrazoğlu

これは、Chrome、Firefox、IE（11）の最新バージョンで可能になりました。

このスレッド のZuulのポインターに従って、IE11と、ページ上の任意の要素を全画面表示するオプションを含めるようにコードを編集しました。

JS：

function toggleFullScreen(elem) {
    // ## The below if statement seems to work better ## if ((document.fullScreenElement && document.fullScreenElement !== null) || (document.msfullscreenElement && document.msfullscreenElement !== null) || (!document.mozFullScreen && !document.webkitIsFullScreen)) {
    if ((document.fullScreenElement !== undefined && document.fullScreenElement === null) || (document.msFullscreenElement !== undefined && document.msFullscreenElement === null) || (document.mozFullScreen !== undefined && !document.mozFullScreen) || (document.webkitIsFullScreen !== undefined && !document.webkitIsFullScreen)) {
        if (elem.requestFullScreen) {
            elem.requestFullScreen();
        } else if (elem.mozRequestFullScreen) {
            elem.mozRequestFullScreen();
        } else if (elem.webkitRequestFullScreen) {
            elem.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
        } else if (elem.msRequestFullscreen) {
            elem.msRequestFullscreen();
        }
    } else {
        if (document.cancelFullScreen) {
            document.cancelFullScreen();
        } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        } else if (document.webkitCancelFullScreen) {
            document.webkitCancelFullScreen();
        } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
        }
    }
}

HTML：

<input type="button" value="click to toggle fullscreen" onclick="toggleFullScreen(document.body)">

ここで、「document.body」は任意の要素です。

また、コンソールからこれらの全画面コマンドを実行しようとすると、ChromeまたはIEで動作しないようです。FirefoxでFirebugを使用しても成功しました。

注意すべきもう1つの点は、これらの「フルスクリーン」コマンドには垂直スクロールバーがないため、CSS内でこれを指定する必要があるということです。

*:fullscreen
*:-ms-fullscreen,
*:-webkit-full-screen,
*:-moz-full-screen {
   overflow: auto !important;
}

「！important」はIEでレンダリングするために必要なようです

これが動作する例です 。

37
Jamie Barker

No。IE（≤6） の旧バージョンは許可ただし、この機能はセキュリティ上の問題と見なされているため、最新のブラウザでは許可されていません。

まだ callwindow.open(url,'','fullscreen=yes')を実行できます。これにより、そこまでの道の90％を取得できますが、結果は少し異なります。

  • IEは、タイトルバーとURLバーのみのウィンドウを開きます。ウィンドウは画面全体に収まるサイズになっており、Windowsタスクバーをカバー。
  • Mozillaは、タイトルバーとURLバーのみのウィンドウも開きます。ただし、新しいウィンドウは開いているウィンドウのサイズを継承します。開いているウィンドウが最大化されている場合、新しいウィンドウは最大化されて開きます。 （タスクバーはカバーされていません。）
  • Chromeは、タイトルバーとURLバーのみのウィンドウも開きます。新しいウィンドウはオープニングウィンドウのサイズを継承しますが、開いたウィンドウが最大化されていない場合です（オープニングウィンドウが最大化されている場合でも）。

これは、JavaScriptを使用した場合とほぼ同じです。 他の選択肢は、Flashで何かを構築することです（ugh！）、または単に「フルスクリーン」ボタンを押して「F11を押してフルスクリーンにする」というライトボックスをポップアップ表示し、window.resizeでライトボックスを非表示にしますまたはライトボックスのキャンセルボタンをクリックします。

編集：適切な フルスクリーンAPI （最初の Mozillaによって提案された および W3Cの提案としてリリースされた ）は、Webkit（Safari 5.1 +/Chrome 15+）およびFirefox（10+）によって実装されました。 ここに簡単な歴史と使用例があります。 IE10はAPIをnotサポートすることに注意してください。

8
josh3736

すべての答えが間違っていることに誰も気付かないのはなぜだろう。

body要素を全画面表示に設定するとnotはF11を押した場合と同じ動作になります。

F11の同じ動作は、次の方法で取得できます。

document.documentElement.webkitRequestFullScreen();   // on

そして

document.webkitCancelFullScreen();  // off

また、フルスクリーンモードになっているかどうかを確認するために、次の行を使用します。

isFullScreen=()=>!(document.webkitCurrentFullScreenElement==null)

注：これは、ユーザーインタラクションイベント（onclick、onkeydownなど）内から呼び出す必要があります。

3
Zibri

これを行うには、署名付きJavaアプレットを使用して自動化スクリプトを実行し、キーストロークを発行してフルスクリーンモードに移行する権限があります。ユーザーがマシンを操作するサイトを気にしない限り。

1
Daniel Pereira

あなたのためにすべての仕事をする未知のライブラリがあります：

https://github.com/rafrex/fscreen

私は同じ問題を抱えていて、（たとえば反応するコンポーネントで）：

import fscreen from 'fscreen';
.....

if (fscreen.fullscreenElement == null) {
  fscreen.requestFullscreen(document.documentElement);
}else{
  fscreen.exitFullscreen();
}

Chrome、Firefox、Safari、IE11、iOS、Androidで動作します

0
Lluís Marfany