31

Javascript/JQuery コードだけを使用して全画面モードに入るにはどうすればよいですか? 目標は、ブラウザーで F11 キーを押したときのようにフルスクリーン モードに入ることが目的ですが、その後はプログラムで行います。

4

9 に答える 9

47

jQuery を使用せずにバニラ JavaScript を使用してフルスクリーン モードを有効にすることができます。

<!DOCTYPE html>

<html>

<head>
    <title>Full Screen Test</title>
</head>

<body id="body">
    <h1>test</h1>

    <script>
    var elem = document.getElementById("body");

    elem.onclick = function() {
        req = elem.requestFullScreen || elem.webkitRequestFullScreen || elem.mozRequestFullScreen;
        req.call(elem);
    }
    </script>
</body>

</html>

注意すべき重要な点の 1 つは、ユーザーがアクション (クリックなど) を実行したときにのみフルスクリーン モードを要求できることです。ユーザー アクション[1] (ページの読み込み時など) がなければ、フル スクリーン モードを要求することはできません。

フルスクリーンモードを切り替えるためのクロスブラウザ機能は次のとおりです（MDN から取得）：

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();
    }
  }
}

詳細については、フルスクリーン API に関する MDN ページを確認してください。

于 2012-11-09T06:48:36.117 に答える
7

これは、ブラウザを全画面表示にするための実際のデモです

http://johndyer.name/lab/fullscreenapi/

于 2012-11-09T06:40:46.447 に答える
2

IE11 (IE8-10) より前のバージョンの IE をサポートするプラグインが必要な場合は、 jQuery.fullscreen を参照してください。IE は、 IE11までこの機能をネイティブにサポートしていませんでした。

于 2015-09-15T14:45:13.497 に答える
2

この目的のために自由に利用できる jquery プラグインを使用できます 。jquery フルスクリーン、jquery フルスクリーン、 jquery フルスクリーンを確認してください。

于 2012-11-09T06:33:33.613 に答える
2

要素の選択を容易にするために JQuery が必要な場合は、次のようにします。

var viewer = $("#parentid .classname .childelement")[0];
var rFS = viewer.mozRequestFullScreen || viewer.webkitRequestFullscreen || viewer.requestFullscreen;
    rFS.call(viewer);
于 2016-12-01T11:18:20.610 に答える
-2

ボタンなどがある場合は、次のスクリプトを使用できます。

<script language="JavaScript">
function fullScreen() {
    var el = document.documentElement
        , rfs = // for newer Webkit and Firefox
               el.requestFullScreen
            || el.webkitRequestFullScreen
            || el.mozRequestFullScreen
            || el.msRequestFullScreen
    ;
    if (typeof rfs != "undefined" && rfs) {
        rfs.call(el);
    } else if (typeof window.ActiveXObject != "undefined") {
        // for Internet Explorer
        var wscript = new ActiveXObject("WScript.Shell");
        if (wscript != null) {
            wscript.SendKeys("{F11}");
        }
    }

}
// End -->

ボタン付き。すべてが簡単ですが<a href="javascript:void(0);" onclick="fullScreen();"><BUTTON></a>
、ページロード時にそのスクリプトをロードするにはどうすればよいですか。これは、何もクリックしなくても、ページロード時に Web フォームがフルスクリーンになることを意味します。

于 2015-07-30T07:01:13.417 に答える