Cara membuat jendela layar penuh dengan Javascript (membentang di seluruh layar)

Bagaimana saya bisa membuat browser pengunjung menjadi layar penuh menggunakan JavaScript, dengan cara yang berfungsi dengan IE, Firefox dan Opera?

Ini sedekat Anda bisa mendapatkan layar penuh dalam 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> 

Di browser yang lebih baru seperti Chrome 15, Firefox 10, Safari 5.1, IE 10 ini dimungkinkan. Itu juga mungkin untuk IE yang lebih lama melalui ActiveX tergantung pada pengaturan browser mereka.

Inilah cara melakukannya:

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

Pengguna jelas harus menerima permintaan layar penuh terlebih dahulu, dan tidak mungkin untuk memicu ini secara otomatis pada pageload, itu perlu dipicu oleh pengguna (mis. Tombol)

Baca selengkapnya: https://developer.mozilla.org/en/DOM/Using_full-screen_mode

Kode ini juga mencakup cara mengaktifkan layar penuh untuk Internet Explorer 9, dan mungkin versi yang lebih lama, serta versi terbaru Google Chrome. Jawaban yang diterima juga dapat digunakan untuk browser lain.

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

Sumber:

• API Layar Penuh Chrome (perhatikan, bahwa requestFullscreen"hanya berfungsi selama" "[m] UIEvents dan MouseEvents lainnya, seperti klik dan keydown, dll.", "Sehingga tidak dapat digunakan dengan jahat".)
• Cara membuat browser layar penuh menggunakan peristiwa kunci F11 melalui JavaScript

Ini adalah solusi lengkap untuk masuk dan keluar dari mode layar penuh (alias batal, keluar, keluar)

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

Anda dapat menggunakan API layar penuh Anda dapat melihat contoh di sini

API layar penuh menyediakan cara mudah untuk menyajikan konten web menggunakan seluruh layar pengguna. Artikel ini memberikan informasi tentang penggunaan API ini.

Teknologi html5 baru - API layar penuh memberi kami cara mudah untuk menyajikan konten halaman web dalam mode layar penuh. Kami akan memberi Anda informasi terperinci tentang mode layar penuh. Coba bayangkan semua kemungkinan keuntungan yang bisa Anda peroleh dengan menggunakan teknologi ini - album foto layar penuh, video, dan bahkan game.

Tetapi sebelum kita menjelaskan teknologi baru ini, saya harus mencatat bahwa teknologi ini bersifat eksperimental, dan didukung oleh semua Browser utama .

Anda dapat menemukan tutorial lengkapnya di sini: http://www.css-jquery-design.com/2013/11/javascript-jquery-fullscreen-browser-window-html5-technology/

Ini Demo yang berfungsi: http://demo.web3designs.com/javascript-jquery-fullscreen-browser-window-html5-technology.htm

Saya sudah menggunakan ini ...

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

Contoh sederhana dari: 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>

Buat Function

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

Dalam Kode Put Html suka

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

Sekarang karena API layar penuh lebih tersebar luas dan tampaknya semakin matang, mengapa tidak mencoba Screenfull.js ? Saya menggunakannya untuk pertama kalinya kemarin dan hari ini aplikasi kami benar-benar layar penuh di (hampir) semua browser!

Pastikan untuk memasangkannya dengan :fullscreenpseudo-class di CSS. Lihat https://www.sitepoint.com/use-html5-full-screen-api/ untuk informasi lebih lanjut.

Untungnya bagi pengguna web yang tidak menaruh curiga hal ini tidak dapat dilakukan hanya dengan javascript. Anda perlu menulis plugin khusus peramban, jika belum ada, dan kemudian membuat orang mengunduhnya. Yang paling dekat Anda dapatkan adalah jendela yang dimaksimalkan tanpa alat atau bilah navigasi tetapi pengguna masih dapat melihat url.

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

Ini umumnya dianggap praktik buruk karena menghapus banyak fungsi browser dari pengguna.

Coba screenfull.js . Ini adalah solusi lintas-browser yang bagus yang juga bisa digunakan untuk browser Opera.

Wrapper sederhana untuk penggunaan lintas-browser API Fullscreen JavaScript, yang memungkinkan Anda membawa halaman atau elemen apa pun ke layar penuh. Memperlancar perbedaan implementasi browser, jadi Anda tidak perlu melakukannya.

Demo .

Ini mungkin mendukung

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

Bisakah Anda Mencoba:

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

Coba skrip ini

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

Untuk panggilan dari skrip gunakan kode ini,

window.fullScreen('fullscreen.jsp');

atau dengan hyperlink gunakan ini

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

Di Firefox 10, Anda dapat membuat halaman saat ini menjadi layar penuh (layar penuh nyata tanpa krom jendela) menggunakan javascript ini:

window.fullScreen = true;

Ini akan berfungsi untuk menunjukkan jendela Anda di layar penuh

Catatan: Agar ini berfungsi, Anda perlu Permintaan dari http://code.jquery.com/jquery-2.1.1.min.js

Atau buat punya tautan javascript seperti ini.

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

Cara Q&P untuk membuka layar penuh, jika Anda berada dalam situasi "kios", adalah memberi makan F11 ke jendela browser setelah menyala dan berjalan. Ini tidak cukup untuk memulai dan pengguna mungkin dapat menyodok layar sentuh di bagian atas dan mendapatkan tampilan semi-layar penuh, tetapi memberi makan F11 bisa dilakukan dalam keadaan darurat atau hanya untuk memulai proyek.

Inilah solusi lengkap saya untuk Full Screendan Exit Full Screenkeduanya (terima kasih banyak atas bantuan dari jawaban menara di atas):

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

});

// MEMANGGIL:

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