Javascript를 사용하여 창을 전체 화면으로 만드는 방법 (화면 전체에 스트레치)

IE, Firefox 및 Opera에서 작동하는 방식으로 방문자의 브라우저를 JavaScript를 사용하여 전체 화면으로 전환하려면 어떻게해야합니까?

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> 

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

이 코드에는 Internet Explorer 9 및 이전 버전과 최신 버전의 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}");
  }
}

출처 :

• Chrome 전체 화면 API (단, requestFullscreen클릭 및 키 다운 등과 같은 대부분의 UIEvents 및 MouseEvents 중 "만 작동"하므로 "악의적으로 사용할 수 없음")
• JavaScript를 통해 F11 키 이벤트를 사용하여 브라우저를 전체 화면으로 만드는 방법

전체 화면 모드로 들어가거나 나가는 완벽한 솔루션입니다 (일명 취소, 종료, 이스케이프).

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

당신은 전체 화면 API를 사용할 수 있습니다 여기에 예제를 볼 수 있습니다

전체 화면 API는 사용자의 전체 화면을 사용하여 웹 콘텐츠를 쉽게 표시 할 수있는 방법을 제공합니다. 이 기사는이 API 사용에 대한 정보를 제공합니다.

새로운 html5 기술 – 전체 화면 API를 사용하면 웹 페이지 콘텐츠를 전체 화면 모드로 쉽게 표시 할 수 있습니다. 전체 화면 모드에 대한 자세한 정보를 제공하려고합니다. 이 기술을 사용하여 얻을 수있는 모든 장점, 즉 전체 화면 사진 앨범, 비디오 및 게임에 대해 상상해보십시오.

그러나이 새로운 기술을 설명하기 전에이 기술은 실험적이며 모든 주요 브라우저에서 지원됩니다 .

전체 자습서는 여기에서 찾을 수 있습니다 : 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

나는 이것을 사용했다 ...

<!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>

간단한 예 : 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>

함수 만들기

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 Code에서

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

이제 전체 화면 API가 더 광범위하고 성숙해 보이므로 Screenfull.js를 사용해보십시오 . 어제 처음으로 사용했으며 오늘날 우리 앱은 거의 모든 브라우저에서 전체 화면으로 제공됩니다!

:fullscreenCSS 의 의사 클래스 와 연결하십시오 . 자세한 내용은 https://www.sitepoint.com/use-html5-full-screen-api/ 를 참조 하십시오 .

운 좋게도 웹 사용자를 의심하지 않으면 자바 스크립트만으로는 수행 할 수 없습니다. 브라우저 별 플러그인이없는 경우 브라우저 별 플러그인을 작성한 다음 사람들이 다운로드하도록 유도해야합니다. 가장 가까운 도구 또는 탐색 막대가없는 최대화 된 창이지만 사용자는 여전히 URL을 볼 수 있습니다.

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

이것은 사용자로부터 많은 브라우저 기능을 제거하기 때문에 일반적으로 나쁜 습관으로 간주됩니다.

screenfull.js를 사용해보십시오 . Opera 브라우저에서도 작동하는 멋진 크로스 브라우저 솔루션입니다.

페이지 또는 요소를 전체 화면으로 가져올 수있는 JavaScript 전체 화면 API의 브라우저 간 사용을위한 간단한 래퍼입니다. 브라우저 구현의 차이를 완화시켜주지 않아도됩니다.

데모 .

이것은 지원할 수 있습니다

<%@ 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>

할 수 있겠 니:

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

이 스크립트를 사용해보십시오

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

Firefox 10에서는 다음 자바 스크립트를 사용하여 현재 페이지를 전체 화면 (창 크롬이없는 실제 전체 화면)으로 만들 수 있습니다.

window.fullScreen = true;

이것은 창을 전체 화면으로 보여줍니다.

참고 : 이것이 작동하려면 http://code.jquery.com/jquery-2.1.1.min.js의 Query가 필요합니다 .

또는 이와 같은 자바 스크립트 링크를 만드십시오.

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

"키오스크"상황에있는 경우 전체 화면으로 이동하는 Q & D 방법은 F11이 시작된 후 브라우저 창에 F11을 공급하는 것입니다. 이것은 시작이 아니며 사용자가 상단에서 터치 스크린을 찌를 수 있고 반 전체 화면을 볼 수는 있지만 F11을 먹이는 것은 핀치하거나 프로젝트를 시작하기 위해 할 수 있습니다.

여기 제에 대한 완전한 솔루션 Full Screen과 Exit 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);" />