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


253

IE、Firefox、Operaで動作するように、JavaScriptを使用してビジターのブラウザーを全画面表示にするにはどうすればよいですか?


29
一般向けではなく、その内部アプリケーション。
私は

2
あなたは、実用的、ユーザーを求めることができる:sprintf('Dear user, the best experience with this site is in fullscreen mode. To view this site full screen, press %s.', _get_browsers_full_Screen_key())
Boldewyn

6
YouTubeのフルスクリーンがどのように機能するか知りたいです。誰かが答えを知っていますか?
Kasturi

6
これはブラウザではなくFlash Playerによって行われます
user63898

5
技術の現状についてここを見て概要:hacks.mozilla.org/2012/01/...を
ローミ

回答:


54

これは、JavaScriptで全画面表示にできる限り近くなります。

<script type="text/javascript">
    window.onload = maxWindow;

    function maxWindow() {
        window.moveTo(0, 0);

        if (document.all) {
            top.window.resizeTo(screen.availWidth, screen.availHeight);
        }

        else if (document.layers || document.getElementById) {
            if (top.window.outerHeight < screen.availHeight || top.window.outerWidth < screen.availWidth) {
                top.window.outerHeight = screen.availHeight;
                top.window.outerWidth = screen.availWidth;
            }
        }
    }
</script> 

evgiが投稿したリンクのリンク/受け入れられた回答を見てください...あなたはブラウザのサイズを変更することができないはずです。ただし、ブラウザーウィンドウ内で最大化することはできます(私がそれを読む方法)
lexu

4
オプションでのJavaScriptの許可設定に依存します。jsコントロールをウィンドウ機能で切り替えることができます。
ガロー2009

3
これは、サイトがそのようなコードを最後に使用したときに発生し、ブロックしませんでした:dorward.me.uk/tmp/fullscreen.jpeg
Quentin

2
webkit-fullscreen APIを見てください:bleeding-edge-tlv.appspot.com/#28(#gdd2011から)
Christian Kuetbach

17
これは古いです。ソリューションをご覧ください!
Keavon 2014

281

Chrome 15、Firefox 10、Safari 5.1、IE 10などの新しいブラウザーでは、これが可能です。ブラウザの設定によっては、ActiveX経由の古いIEでも可能です。

方法は次のとおりです。

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

ユーザーは明らかに最初にフルスクリーンリクエストを受け入れる必要があり、ページロード時にこれを自動的にトリガーすることはできません。ユーザー(ボタンなど)がトリガーする必要があります。

続きを読む:https : //developer.mozilla.org/en/DOM/Using_full-screen_mode


3
現在Chrome 15、Firefox 10、Safari 5.1で利用できます。現在のプレイ状況の詳細については、こちらのhacks.mozilla.orgブログ投稿をご覧ください。
Simon Lieschke

10
全画面を終了する素晴らしい方法はありますか?
クリストファーチェイス

2
いくつかのこと。IEでは、これは明らかに要素と全画面を無視します。全画面表示にしたい場合はdocument.documentElement、すべてが渡され、正しいルート要素( 'html'または 'body')が確実に取得されます。を使用cancelFullscreen()して閉じることができます(またはIEの場合は「F11」をもう一度送信します)。
Matthew Wilcoxson 2013年

6
これはユーザーによってのみトリガーできます(たとえば、全画面ボタンを介して)。オンロード中の自動全画面表示はできません。
A. KR

3
IEのスペルエラーは、msdn.microsoft.com
en

66

このコードには、Internet Explorer 9のフルスクリーンを有効にする方法と、おそらく古いバージョン、および非常に最近のバージョンのGoogle Chromeも含まれています。承認された回答は、他のブラウザでも使用できます。

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

出典:


上記のIE 8で動作し、上記のFF10(FF 9で試したが動作しない)、Chrome 18でテスト済み
Treby

@Peter O.「イベントハンドラーに配置する必要があります」、オンロードでトリガーする方法はありますか?
フランシスP

@FrancisP:いいえ。「load」も「DOMContentLoaded」も、フルスクリーンAPIに適用可能なUIEventまたはMouseEventではありません。
Peter O.

2
「(。ただし、requestFullScreenがあること『だけ『[M]のOST UIEventsとのMouseEvents、などをクリックし、KeyDownイベント、など』、『それは悪意をもって使用することはできませんので、』』の間に働く)」をありがとう

はい、私documentElementよりはbodyましです。
マット

24

全画面モードを開始および終了するための完全なソリューションは次のとおりです(キャンセル、終了、エスケープとも呼ばれます)

        function cancelFullScreen(el) {
            var requestMethod = el.cancelFullScreen||el.webkitCancelFullScreen||el.mozCancelFullScreen||el.exitFullscreen;
            if (requestMethod) { // cancel full screen.
                requestMethod.call(el);
            } else if (typeof window.ActiveXObject !== "undefined") { // Older IE.
                var wscript = new ActiveXObject("WScript.Shell");
                if (wscript !== null) {
                    wscript.SendKeys("{F11}");
                }
            }
        }

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

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

        function toggleFull() {
            var elem = document.body; // Make the body go full screen.
            var isInFullScreen = (document.fullScreenElement && document.fullScreenElement !== null) ||  (document.mozFullScreen || document.webkitIsFullScreen);

            if (isInFullScreen) {
                cancelFullScreen(document);
            } else {
                requestFullScreen(elem);
            }
            return false;
        }

1
どうmsIsFullScreenですか?
kangax

1
仕様が変更されました。webkitCancelFullScreenですwebkitExitFullscreengeneratedcontent.org/post/70347573294/...
ダグS

この論理演算の最初の部分は冗長であり、削除する必要がありますdocument.fullScreenElement && document.fullScreenElement !== null
consideRatio

elemin toggleFull()document.bodyto document.documentElementに変更して、左右のマージンの問題を修正します
Firnas


8

新しいhtml5テクノロジー–フルスクリーンAPIを使用すると、フルスクリーンモードでWebページコンテンツを簡単に表示できます。フルスクリーンモードに関する詳細情報をお知らせします。フルスクリーンの写真アルバム、ビデオ、さらにはゲームなど、このテクノロジーを使用して得られるすべての利点について想像してみてください。

しかし、この新しいテクノロジーについて説明する前に、このテクノロジーは実験的であり、すべての主要なブラウザでサポートされていることに注意する必要があります。

ここで完全なチュートリアルを見つけることができます: http : //www.css-jquery-design.com/2013/11/javascript-jquery-fullscreen-browser-window-html5-technology/

ここでデモが動作しています: http : //demo.web3designs.com/javascript-jquery-fullscreen-browser-window-html5-technology.htm


1
@Ian IEエッジで動作しています。古いバージョンのIEはこれをサポートしていません。
Dhiraj 2017年

8

私はこれを使いました...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>
    <script language="JavaScript">
        function fullScreen(theURL) {
            window.open(theURL, '', 'fullscreen=yes, scrollbars=auto');
        }
        // End -->
    </script>
</head>

<body>
    <h1 style="text-align: center;">
        Open In Full Screen
    </h1>
    <div style="text-align: center;"><br>
        <a href="javascript:void(0);" onclick="fullScreen('http://google.com');">
            Open Full Screen Window
        </a>
    </div>
</body>

</html>

window.open(theURL、 ''、 'fullscreen = yes'、 'scrollbars = auto'); この行に括弧の問題があります
Kevin Bowersox

それは親からですが。ウィンドウがすでに開いている場合は役に立ちません。
クリスチャン

7

簡単な例:http : //www.longtailvideo.com/blog/26517/using-the-browsers-new-html5-fullscreen-capabilities/

<script type="text/javascript">
  function goFullscreen(id) {
    // Get the element that we want to take into fullscreen mode
    var element = document.getElementById(id);

    // These function will not exist in the browsers that don't support fullscreen mode yet, 
    // so we'll have to check to see if they're available before calling them.

    if (element.mozRequestFullScreen) {
      // This is how to go into fullscren mode in Firefox
      // Note the "moz" prefix, which is short for Mozilla.
      element.mozRequestFullScreen();
    } else if (element.webkitRequestFullScreen) {
      // This is how to go into fullscreen mode in Chrome and Safari
      // Both of those browsers are based on the Webkit project, hence the same prefix.
      element.webkitRequestFullScreen();
   }
   // Hooray, now we're in fullscreen mode!
  }
</script>

<img class="video_player" src="image.jpg" id="player"></img>
<button onclick="goFullscreen('player'); return false">Click Me To Go Fullscreen! (For real)</button>

6

関数を作成

function toggleFullScreen() {

            if ((document.fullScreenElement && document.fullScreenElement !== null) ||
                    (!document.mozFullScreen && !document.webkitIsFullScreen)) {
             $scope.topMenuData.showSmall = true;
                if (document.documentElement.requestFullScreen) {
                    document.documentElement.requestFullScreen();
                } else if (document.documentElement.mozRequestFullScreen) {
                    document.documentElement.mozRequestFullScreen();
                } else if (document.documentElement.webkitRequestFullScreen) {
                    document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
                }
            } else {

                  $scope.topMenuData.showSmall = false;
                if (document.cancelFullScreen) {
                    document.cancelFullScreen();
                } else if (document.mozCancelFullScreen) {
                    document.mozCancelFullScreen();
                } else if (document.webkitCancelFullScreen) {
                    document.webkitCancelFullScreen();
                }
            }
        }

Html Putコードのように

<ul class="unstyled-list fg-white">

            <li class="place-right" data-ng-if="!topMenuData.showSmall" data-ng-click="toggleFullScreen()">Full Screen</li>
            <li class="place-right" data-ng-if="topMenuData.showSmall" data-ng-click="toggleFullScreen()">Back</li>
        </ul>

ifステートメントは、IE 11の全画面モードでそれを検出しないようです(したがって、閉じません)。
Ian

3

フルスクリーンAPIがより広く普及し、成熟しているように見える今、Screenfull.jsを試してみませんか?私は昨日初めてそれを使用し、今日、私たちのアプリは(ほぼ)すべてのブラウザーで本当にフルスクリーンになります!

必ず:fullscreenCSSの疑似クラスと組み合わせてください。詳細については、https://www.sitepoint.com/use-html5-full-screen-api/を参照してください


驚くべき小さなスクリプト。現在、www.StarCommanderOnline.comにある私のWebサイトで使用しています。どうも!
アンディ

3

幸いなことに、無防備なWebユーザーにとっては、JavaScriptだけではこれを行うことはできません。ブラウザー固有のプラグインがまだ存在しない場合は、それらを作成し、どういうわけか人々にダウンロードしてもらう必要があります。取得できる最も近いのは、ツールやナビゲーションバーのない最大化されたウィンドウですが、ユーザーは引き続きURLを表示できます。

window.open('http://www.web-page.com', 'title' , 'type=fullWindow, fullscreen, scrollbars=yes');">

これは、ユーザーから多くのブラウザー機能を削除するため、一般的には悪い習慣と見なされています。


3

screenfull.jsを試してください。これはOperaブラウザーでも機能する優れたクロスブラウザーソリューションです。

JavaScriptフルスクリーンAPIをクロスブラウザーで使用するための単純なラッパー。これにより、ページまたは任意の要素をフルスクリーンで表示できます。ブラウザーの実装の違いを滑らかにするため、そうする必要はありません。

デモ


2

これはサポートするかもしれません

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default5.aspx.cs" Inherits="PRODUCTION_Default5" %>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
        <title>Untitled Page</title>
        <script type="text/javascript">
            function max()
            {
               window.open("", "_self", "fullscreen=yes, scrollbars=auto"); 
            }
        </script>
    </head>
    <body onload="max()">
        <form id="form1" runat="server">
        <div>
        This is Test Page
        </div>
        </form>
    </body>
    </html>

2

あなたは試すことができます:

<script type="text/javascript">
    function go_full_screen(){
      var elem = document.documentElement;
      if (elem.requestFullscreen) {
        elem.requestFullscreen();
      } else if (elem.msRequestFullscreen) {
        elem.msRequestFullscreen();
      } else if (elem.mozRequestFullScreen) {
        elem.mozRequestFullScreen();
      } else if (elem.webkitRequestFullscreen) {
        elem.webkitRequestFullscreen();
      }
    }
</script>

<a href="#" onClick="go_full_screen();">Full Screen / Compress Screen</a>


UbuntuのChrome 76で私にとって失敗するようです
Jonathan

1

このスクリプトを試してください

<script language="JavaScript">
function fullScreen(theURL) {
window.open(theURL, '', 'fullscreen=yes, scrollbars=auto' );
}
</script>

スクリプトからの呼び出しには、次のコードを使用します。

window.fullScreen('fullscreen.jsp');

またはハイパーリンクでこれを使用します

<a href="javascript:void(0);" onclick="fullScreen('fullscreen.jsp');"> 
Open in Full Screen Window</a>

1

Firefox 10では、次のjavascriptを使用して、現在のページをフルスクリーン(ウィンドウクロムのない実際のフルスクリーン)にすることができます。

window.fullScreen = true;

1
「想定される」という用語は、ソフトウェアではそのように過負荷になっています。一部のブラウザでは読み取り専用です。Firefox 10では設定できます。
Leopd 2012

1

これはウィンドウをフルスクリーンで表示するように機能します

注: これを機能させるには、http://code.jquery.com/jquery-2.1.1.min.jsからのクエリが必要です。

または、このようなJavaScriptリンクを作成します。

<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>

   <div id="demo-element">
        <span>Full Screen Mode Disabled</span>
        <button id="go-button">Enable Full Screen</button>
    </div>
    <script>
    function GoInFullscreen(element) {
        if(element.requestFullscreen)
            element.requestFullscreen();
        else if(element.mozRequestFullScreen)
            element.mozRequestFullScreen();
        else if(element.webkitRequestFullscreen)
            element.webkitRequestFullscreen();
        else if(element.msRequestFullscreen)
            element.msRequestFullscreen();
    }

    function GoOutFullscreen() {
        if(document.exitFullscreen)
            document.exitFullscreen();
        else if(document.mozCancelFullScreen)
            document.mozCancelFullScreen();
        else if(document.webkitExitFullscreen)
            document.webkitExitFullscreen();
        else if(document.msExitFullscreen)
            document.msExitFullscreen();
    }

    function IsFullScreenCurrently() {
        var full_screen_element = document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement || null;

        if(full_screen_element === null)
            return false;
        else
            return true;
    }

    $("#go-button").on('click', function() {
        if(IsFullScreenCurrently())
            GoOutFullscreen();
        else
            GoInFullscreen($("#demo-element").get(0));
    });

    $(document).on('fullscreenchange webkitfullscreenchange mozfullscreenchange MSFullscreenChange', function() {
        if(IsFullScreenCurrently()) {
            $("#demo-element span").text('Full Screen Mode Enabled');
            $("#go-button").text('Disable Full Screen');
        }
        else {
            $("#demo-element span").text('Full Screen Mode Disabled');
            $("#go-button").text('Enable Full Screen');
        }
    });</script>

0

全画面表示にするQ&Dの方法は、「キオスク」の状況にある場合、F11を起動して実行した後にブラウザーウィンドウにフィードすることです。これはかなり初期段階ではなく、ユーザーは上部のタッチスクリーンを突き出して半全画面ビューを表示できる場合がありますが、F11を供給するとピンチインするか、プロジェクトを開始するだけの場合があります。


0

ここに私のための完全なソリューションであるFull ScreenExit Full Screenの両方(タワーの答えからの助けに感謝上記の):

$(document).ready(function(){
$.is_fs = false;
$.requestFullScreen = function(calr)
{
    var element = document.body;

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

    $.is_fs = true;    
    $(calr).val('Exit Full Screen');
}

$.cancel_fs = function(calr)
{
    var element = document; //and NOT document.body!!
    var requestMethod = element.exitFullScreen || element.mozCancelFullScreen || element.webkitExitFullScreen || element.mozExitFullScreen || element.msExitFullScreen || element.webkitCancelFullScreen;

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

    $(calr).val('Full Screen');    
    $.is_fs = false;
}

$.toggleFS = function(calr)
{    
    $.is_fs == true? $.cancel_fs(calr):$.requestFullScreen(calr);
}

});

//呼び出し:

<input type="button" value="Full Screen" onclick="$.toggleFS(this);" />
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.