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


253

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


29
aplikasi batinnya, bukan untuk publik. im tidak akan menyalahgunakan siapa pun
user63898

2
Anda bisa, secara pragmatis, bertanya kepada pengguna: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
Saya ingin tahu bagaimana cara kerja layar penuh youtube. Adakah yang tahu jawabannya?
Kasturi

6
ini dilakukan oleh flash player bukan browser
user63898

5
Untuk tinjauan umum terkini,
loomi

Jawaban:


54

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> 

lihat tautan / jawaban yang diterima di tautan haim evgi yang diposkan ... Anda seharusnya tidak dapat mengubah ukuran peramban. Namun Anda dapat memaksimalkan dalam jendela browser (seperti yang saya baca)
lexu

4
Tergantung pada pengaturan izin javascript Anda di Opsi. Anda dapat mengaktifkan kontrol js atas fitur-fitur jendela.
garrow

3
Ini terjadi terakhir kali situs menggunakan kode seperti itu dan saya tidak memblokirnya: dorward.me.uk/tmp/fullscreen.jpeg
Quentin

2
Lihatlah API webkit-layar penuh: bleeding-edge-tlv.appspot.com/#28 (dari # gdd2011)
Christian Kuetbach

17
INI LAMA. LIHAT DI BAWAH INI UNTUK SOLUSI!
Keavon

281

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


3
Saat ini tersedia di Chrome 15, Firefox 10, dan Safari 5.1. Lihat posting blog hacks.mozilla.org ini untuk perincian tentang kondisi permainan saat ini.
Simon Lieschke

10
Fantastis, ada cara untuk keluar dari layar penuh?
Christopher Chase

2
Beberapa hal. Di IE ini jelas akan mengabaikan elemen dan semuanya layar penuh. Jika Anda ingin layar penuh semuanya lewat document.documentElementyang akan memastikan Anda akan mendapatkan elemen root yang benar ('html' atau 'tubuh'). Dan gunakan dapat digunakan cancelFullscreen()untuk menutupnya (atau mengirim 'F11' lagi untuk IE).
Matthew Wilcoxson

6
Itu hanya dapat dipicu oleh pengguna (misalnya melalui tombol layar penuh). Layar penuh otomatis selama onload tidak dimungkinkan.
A. KR

3
kesalahan pengejaan untuk IE, harus berupa msRequestFullScreen, seperti dalam dokumen msdn.microsoft.com/en-us/library/ie/dn265028(v=vs.85).aspx
DanielB

66

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:


Bekerja pada IE 8 di atas, FF10 di atas (dicoba pada FF 9, tidak berhasil), diuji pada Chrome 18
Treby

@Peter O. "harus ditempatkan di event handler", cara apa saja untuk memicunya memuat
Francis P

@FrancisP: Tidak; baik "memuat" maupun "DOMContentLoaded" adalah UIEvent atau MouseEvent yang berlaku untuk API Layar Penuh.
Peter O.

2
Terima kasih untuk "(perhatikan, bahwa requestFullScreen" hanya berfungsi selama "" [m] UIEvents dan MouseEvents pertama, seperti klik dan keydown, dll. "," Jadi tidak dapat digunakan dengan jahat ".)"

Ya documentElementlebih baik daripada bodybagi saya.
Matt

24

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

1
Bagaimana dengan msIsFullScreen?
kangax

1
Spek telah berubah. webkitCancelFullScreensekarang webkitExitFullscreen. generatecontent.org/post/70347573294/...
Doug S

bagian pertama dari operasi logis dan ini mubazir dan harus dihapusdocument.fullScreenElement && document.fullScreenElement !== null
consideRatio

mengubah elemdalam toggleFull()dari document.bodyke document.documentElementke fix kiri dan masalah margin kanan
Firnas


8

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


1
@Ian Ini bekerja di tepi IE. Versi IE yang lebih lama tidak mendukung ini.
Dhiraj

8

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>

window.open (theURL, '', 'fullscreen = yes', 'scrollbars = auto'); Ada masalah parens di baris ini
Kevin Bowersox

Itu dari orangtua. Tidak membantu ketika jendela sudah dibuka.
Christian

7

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>

6

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>

jika pernyataan sepertinya tidak mendeteksi itu dalam mode layar penuh di IE 11 (jadi tidak menutup).
Ian

3

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.


Naskah kecil yang menakjubkan. Menggunakannya di situs web saya sekarang di www.StarCommanderOnline.com. Terima kasih!
Andy

3

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.


3

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 .


2

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>

2

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>


Tampaknya gagal bagi saya di Chrome 76 di Ubuntu
Jonathan

1

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>

1

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

window.fullScreen = true;

1
Istilah "seharusnya" begitu kelebihan dalam perangkat lunak. Di beberapa browser, ini hanya baca. Firefox 10 memungkinkan Anda mengaturnya.
Leopd

1

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>

0

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.


0

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);" />
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.