web-dev-qa-db-ja.com

JavaScriptを介してF11キーイベントを使用してブラウザをフルスクリーンにする方法

ブラウザを全画面表示にしたい。 F11キーイベントを行う場合と同じです。私は次のようないくつかの例を見つけました

function maxwin() {
    var wscript = new ActiveXObject("WScript.Shell");
    if (wscript!=null) {
         wscript.SendKeys("{F11}");
    }
}

これは、Mozillaやその他の最新のブラウザでは機能しません。この問題を解決する方法があれば教えてください。

ありがとう。 （あらかじめ。）

javascriptbrowserscreenfullscreenkeyevent
7
Delmond

これは、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;
}

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

10
Jamie Barker

代わりにこのコードを使用してください

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

出典： Javascriptフルスクリーンウィンドウで作成する方法（画面全体に拡大）

Chrome、上記のFF10、IE 8上記、Safari5で動作およびテスト済み。

10
Treby

ネイティブコードまたはブラウザ拡張機能なしでは不可能です。 ActiveXObjectは、IEブラウザにのみ存在します。

6
Femi