membuat fullscreen dengan onclick javascript

Hallo blogger kali ini saya akan menjelaskan tentang membuat browser fullscreen dengan menggunakan event onclick javascript. fullscreen biasanya digunakan untuk menampilkan vidio / gambar hingga tampilan web. seperti yang kita lihat di youtube terdapat tombol fullscreen di bagian bawah kanan player vidio, ketika kita klik maka secara otomatis vidio akan memenuhi layar kita atau sering juga kita sebut (Full Screen). secara manual fullscreen dapat kita lakukan dengan cara menekan tombol  F11 pada key board.

mungkin saya kira cukup untuk penjelasan apa itu fullscreen lansung saja masuk ke materi. untuk melakukan fullscreen dapat kita lakukan dengan berbagai macam cara yaitu :

  1. javascript
  2. jquery
  3. tombol f11 di keybord
Namun kali ini saya hanya akan menjelaskan dengan metode javascript caranya adalah :

  1. buat sebuah halaman html dengan nama arifweb.html
  2. masukkan script berikut
    <html>
    <head>
    <title> Arifweb.com membuat fullscreen dengan javascript</title>
        <script type="text/javascript">
            function toggleFullScreen() {
      if ((document.fullScreenElement && document.fullScreenElement !== null) ||  
       (!document.mozFullScreen && !document.webkitIsFullScreen)) {
        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 {
        if (document.cancelFullScreen) {
          document.cancelFullScreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        }
      }
    }
        </script>
    </head>
    <body>
        Klik tombol dibawah ini untuk fullscreen </br>
        <button onclick="toggleFullScreen ();">Klik disini</button>
       
    </body>
    </html>
  3. // pada button sudah kita selipkan event onclick yang akan memanggil fungsi toggleFullScreen
  4. buka arifweb.html di browser
  5. klik tombol "klik disini"
  6. lihat apa yang terjadi
mungkin cukup sekian tutorial saya kali ini tentang membuat fullscreen dengan onclick javascript. jika artikel ini bermanfaat dan ada yang ingin ditanyakan silahkan masukkan ke kolom komentar terima kasih :)

Share this

Related Posts

Previous
Next Post »