Tam Ekran Nasıl Yapılır

JavaScript ile tam ekran penceresi nasıl oluşturulur öğrendiğinizden bahseden ders.

Tam Ekran Penceresi

JavaScript ile nasıl tam ekran modunda öğe görüntülenir.

Videoyu tam ekran modunda açmak için düğmeyi tıklayın:

Kişisel Deneyimleyin

Tam Ekran Video

Öğeyi tam ekran olarak açmak için element.requestFullscreen() Yöntem:

Örnek

<script>
/* Tam ekran modunda gösterilecek öğeyi (bu örnekte video) alır: */
var elem = document.getElementById("myvideo");
/* openFullscreen() fonksiyonu çalıştırıldığında, videoyu tam ekran olarak açın. */
Dikkat, farklı tarayıcılar için ön ekler içeririz çünkü hala requestFullscreen yöntemini desteklemiyorlar */
function openFullscreen() {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.webkitRequestFullscreen) { /* Safari */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE11 */
    elem.msRequestFullscreen();
  }
}
</script>

Kişisel Deneyimleyin

Tam Ekran Döküman

Tüm sayfayı tam ekran olarak açmak için lütfen document.documentElement değiştirmek için document.getElementById("element")。

Bu örnekte, tam ekran çıkışını gerçekleştirmek için bir kapanış fonksiyonu kullanıyoruz:

Örnek

<script>
/* documentElement (<html>)'yi tam ekran olarak göstermek için alın */
var elem = document.documentElement;
/* Tam ekran görüntüleme */
function openFullscreen() {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.webkitRequestFullscreen) { /* Safari */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE11 */
    elem.msRequestFullscreen();
  }
}
/* Çıkış tam ekran */
function closeFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.webkitExitFullscreen) { /* Safari */
    document.webkitExitFullscreen();
  } else if (document.msExitFullscreen) { /* IE11 */
    document.msExitFullscreen();
  }
}
</script>

Sayfa tam ekran modunda olduğunda, sayfa stillerini ayarlamak için CSS de kullanabilirsiniz:

Örnek

/* Safari */
:-webkit-full-screen {
  background-color: yellow;
}
/* IE11 */
:-ms-fullscreen {
  background-color: yellow;
}
/* Standart syntax */
:fullscreen {
  background-color: yellow;
}

Kişisel Deneyimleyin

İlgili Sayfalar

HTML DOM Referans Kılavuzu:requestFullscreen() Metodu

HTML DOM Referans Kılavuzu:exitFullscreen() Metodu

HTML DOM Referans Kılavuzu:documentElement Metodu