Pencereyi Javascript ile tam ekran yapmak (tüm ekranda uzanan)

IE, Firefox ve Opera ile çalışacak şekilde bir ziyaretçinin tarayıcısını JavaScript kullanarak tam ekrana nasıl getirebilirim?

Bu, JavaScript'te tam ekrana ulaşabileceğiniz kadar yakındır:

<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 gibi yeni tarayıcılarda bu mümkündür. Tarayıcı ayarlarına bağlı olarak eski IE'ler için ActiveX üzerinden de mümkündür.

Bunu nasıl yapacağınız aşağıda açıklanmıştır:

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

Kullanıcının öncelikle tam ekran isteğini kabul etmesi gerekiyor ve bunu sayfa yüklerken otomatik olarak tetiklemek mümkün değil, bir kullanıcı tarafından tetiklenmesi gerekiyor (örn. Bir düğme)

Daha fazla bilgi için: https://developer.mozilla.org/en/DOM/Using_full-screen_mode

Bu kod ayrıca, Internet Explorer 9 ve muhtemelen eski sürümler için tam ekranın yanı sıra Google Chrome'un son sürümlerinin nasıl etkinleştirileceğini de içerir. Kabul edilen cevap diğer tarayıcılar için de kullanılabilir.

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

Kaynaklar:

• Chrome Tam Ekran API'sı (bununla birlikte, requestFullscreen"yalnızca" "[m] ost UIEvents ve mouseEvents, click ve keydown vb. Sırasında", "kötü amaçlı kullanılamayacağını" unutmayın.)
• JavaScript aracılığıyla F11 tuş etkinliğini kullanarak tarayıcı tam ekran nasıl yapılır

Tam ekran moduna girip çıkmak için tam bir çözüm (iptal, çıkış, kaçış olarak da bilinir)

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

Sen kullanabilirsiniz Tam ekran API görebilirsiniz bir örnek burada

Tam ekran API, web içeriğinin kullanıcının tüm ekranı kullanılarak sunulması için kolay bir yol sağlar. Bu makalede, bu API'nın kullanımı hakkında bilgi verilmektedir.

Yeni html5 teknolojisi - tam ekran API, bize bir web sayfası içeriğini tam ekran modunda sunmanın kolay bir yolunu sunar. Size tam ekran modu hakkında ayrıntılı bilgi vermek üzereyiz. Tam ekran fotoğraf albümleri, videolar ve hatta oyunlar gibi bu teknolojiyi kullanarak elde edebileceğiniz tüm avantajları hayal etmeye çalışın.

Ancak bu yeni teknolojiyi açıklamadan önce, bu teknolojinin deneysel olduğunu ve tüm büyük Tarayıcılar tarafından desteklendiğini belirtmeliyim .

Eğiticinin tamamını burada bulabilirsiniz: http://www.css-jquery-design.com/2013/11/javascript-jquery-fullscreen-browser-window-html5-technology/

İşte Demo çalışıyor: http://demo.web3designs.com/javascript-jquery-fullscreen-browser-window-html5-technology.htm

Bunu kullandım ...

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

Basit bir örnek: http://www.longtailvideo.com/blog/26517/using-the-browsers-new-html5-fullscreen-capability/

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

İşlev Oluştur

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 Kodu koymak gibi

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

Artık tam ekran API'leri daha yaygın ve olgunlaşıyor gibi görünüyor, neden Screenfull.js'yi denemiyorsunuz ? Dün ilk kez kullandım ve bugün uygulamamız (neredeyse) tüm tarayıcılarda gerçekten tam ekran gidiyor!

:fullscreenCSS'deki sözde sınıfla eşleştirdiğinizden emin olun . Daha fazla bilgi için https://www.sitepoint.com/use-html5-full-screen-api/ adresine bakın .

Neyse ki şüpheli web kullanıcıları için bu sadece javascript ile yapılamaz. Zaten mevcut değilse, tarayıcıya özgü eklentiler yazmanız ve ardından bir şekilde kullanıcıların bunları indirmesini sağlamanız gerekir. Alabileceğiniz en yakın araç veya gezinme çubuğu olmayan en üst düzeye çıkarılmış bir penceredir, ancak kullanıcılar yine de url'yi görebilir.

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

Kullanıcıdan çok sayıda tarayıcı işlevselliğini kaldırdığından, bu genellikle kötü uygulama olarak kabul edilir.

Screenfull.js dosyasını deneyin . Opera tarayıcısı için de çalışması gereken hoş bir çapraz tarayıcı çözümü.

Sayfayı veya herhangi bir öğeyi tam ekrana getirmenizi sağlayan JavaScript Tam Ekran API'sının tarayıcılar arası kullanımı için basit sarmalayıcı. Tarayıcı uygulama farklılıklarını yumuşatır, böylece yapmanız gerekmez.

Demo .

Bu destekleyebilir

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

Deneyebilir misin:

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

Bu komut dosyasını deneyin

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

Komut dosyasından çağrı yapmak için bu kodu kullanın,

window.fullScreen('fullscreen.jsp');

veya köprü ile bunu kullanın

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

Firefox 10'da, bu javascript'i kullanarak mevcut sayfanın tam ekrana (pencere kromu olmadan gerçek tam ekran) geçmesini sağlayabilirsiniz:

window.fullScreen = true;

Bu pencerenizi tam ekranda göstermek için çalışır

Not: Bunun çalışması için http://code.jquery.com/jquery-2.1.1.min.js adresinden Sorguya ihtiyacınız vardır.

Veya böyle bir javascript bağlantısı var olun.

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

Bir "kiosk" durumundaysanız, tam ekrana geçmenin bir Soru-Cevap yolu, açıldıktan ve çalıştırıldıktan sonra tarayıcı penceresine bir F11 beslemektir. Bu iyi bir başlangıç ​​değil ve kullanıcı üstte bir dokunmatik ekranı düzeltebilir ve yarı tam ekran görünümü elde edebilir, ancak F11'i beslemek bir tutamla veya sadece bir projeye başlamak için yapabilir.

İşte Full Screenve Exit Full Screenher ikisi için tam çözümüm (yukarıdaki kulenin cevabından yardım için çok teşekkürler):

$(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);
}

});

// ARAMA:

<input type="button" value="Full Screen" onclick="$.toggleFS(this);" />