JavaScript を使用してブラウザ ウィンドウを全画面表示にする方法

JavaScript でウィンドウを全画面にする方法 (画面全体に拡張)

はじめに

フルスクリーンを実現する- Web サイト訪問者に対する画面エクスペリエンスは、没入型コンテンツにとって非常に重要です。以前は、ブラウザの互換性の問題により、これは困難でした。しかし、最新のブラウザの出現と JavaScript の進歩により、比較的簡単にウィンドウを全画面表示にすることが可能になりました。

解決策

訪問者のブラウザは JavaScript を使用して全画面表示になり、以下を活用できます。アプローチ:

function requestFullScreen(element) {
    // Supports most browsers and their versions.
    var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen;

    if (requestMethod) { // Native full screen.
        requestMethod.call(element);
    } else if (typeof window.ActiveXObject !== "undefined") { // Older IE.
        var wscript = new ActiveXObject("WScript.Shell");
        if (wscript !== null) {
            wscript.SendKeys("{F11}");
        }
    }
}

var elem = document.body; // Make the body go full screen.
requestFullScreen(elem);

説明

• requestFullScreen() 関数は、さまざまなブラウザーでサポートされているネイティブの全画面リクエスト メソッドをチェックします。
• ネイティブ メソッドが利用可能な場合は、指定された要素 (この場合は body 要素) でそのメソッドを呼び出し、ページ全体をいっぱいにします
• 古いバージョンの Internet Explorer では、ActiveXObject を使用して F11 キーストロークを送信し、全画面モードをトリガーします。

追加メモ

• 全画面モードではユーザーの同意が必要なため、ユーザーがアクションを開始することが重要です（ボタンのクリックなど）リクエストをトリガーします。
• 一部の古いブラウザではこの機能が完全にサポートされていない可能性があるため、このソリューションを実装する前にブラウザの互換性を確認することをお勧めします。

参考

• [全画面モードの使用 | MDN](https://developer.mozilla.org/en/DOM/Using_full-screen_mode)

以上がJavaScript を使用してブラウザ ウィンドウを全画面表示にする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。