274

IE、Firefox、Operaで動作するように、JavaScriptを使用して訪問者のブラウザを全画面表示にするにはどうすればよいですか？

4

22 に答える 22

307

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

于 2011-09-23T07:40:34.923 に答える
67

このコードには、Internet Explorer 9、おそらく古いバージョン、およびごく最近のバージョンのGoogleChromeでフルスクリーンを有効にする方法も含まれています。受け入れられた回答は、他のブラウザにも使用される場合があります。

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

出典：

于 2011-11-01T12:35:36.933 に答える
55

これは、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>
于 2009-07-14T12:41:37.797 に答える
31

フルスクリーンモード（キャンセル、終了、エスケープ）を開始および終了するための完全なソリューションは次のとおりです。

        function cancelFullScreen() {
            var el = document;
            var requestMethod = el.cancelFullScreen||el.webkitCancelFullScreen||el.mozCancelFullScreen||el.exitFullscreen||el.webkitExitFullscreen;
            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 toggleFullScreen(el) {
            if (!el) {
                el = document.body; // Make the body go full screen.
            }
            var isInFullScreen = (document.fullScreenElement && document.fullScreenElement !== null) ||  (document.mozFullScreen || document.webkitIsFullScreen);

            if (isInFullScreen) {
                cancelFullScreen();
            } else {
                requestFullScreen(el);
            }
            return false;
        }
于 2012-08-05T22:46:36.713 に答える
16

フルスクリーンAPIを使用できますここで例 を見ることができます

フルスクリーンAPIは、ユーザーの画面全体を使用してWebコンテンツを表示するための簡単な方法を提供します。この記事では、このAPIの使用に関する情報を提供します。

于 2012-11-08T18:02:05.043 に答える
9

簡単な例：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>
于 2013-02-28T12:59:38.950 に答える
9

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

<!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>
于 2010-04-08T14:37:50.097 に答える
6

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

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

デモ。

于 2019-05-30T09:24:33.793 に答える
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>
于 2009-11-13T12:45:34.500 に答える
2

これは、ウィンドウを全画面表示するために機能します

注:これが機能するには、 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>
于 2019-01-27T13:31:43.477 に答える
1

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

window.fullScreen = true;
于 2012-02-11T00:45:34.197 に答える
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>
于 2011-12-16T07:18:18.420 に答える
0

「キオスク」の状況にある場合、全画面表示にする Q&D の方法は、ブラウザ ウィンドウが起動して実行された後に F11 キーを押すことです。これはかなり起動しているわけではなく、ユーザーは上部のタッチ スクリーンを押して半フルスクリーン ビューを表示できる可能性がありますが、F11 を使用すると、ピンチの場合やプロジェクトを開始するだけの場合があります。

于 2012-04-19T07:59:46.767 に答える