Fullscreen API requestFullscreen() yöntemi

Tanım ve Kullanım

requestFullscreen() Elementi tam ekran modunda açan yöntem.

İpucu:Kullanın: exitFullscreen() yöntemiTam ekran modunu iptal edin.

Örnek

Örnek 1

Tam ekran modunda <video> elementini gösterin:

/* Tam ekran modunda gösterilecek elementi (örneğin, videoyu) alın: */
var elem = document.getElementById("myvideo");
/* openFullscreen() fonksiyonunu çalıştırırken, videoyu tam ekran açın.
Dikkat edin, farklı tarayıcıların ön eklerini içermemiz gerekiyor, çünkü requestFullscreen özelliğini henüz desteklemiyorlar */
function openFullscreen() {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.webkitRequestFullscreen) { /* Safari */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE11 */
    elem.msRequestFullscreen();
  }
}

Kişisel olarak deneyin

Örnek 2

HTML sayfasını tam ekran açmak için document.documentElement kullanmanız gerekiyor,而不是 document.getElementById("element"). Bu örnekte, tam ekranı kapatmak için bir kapatma fonksiyonu kullandık:

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

Kişisel olarak deneyin

Örnek 3

Sayfa tam ekran modunda olduğunda, aynı zamanda CSS ile sayfa stilini ayarlayabilirsiniz:

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

Kişisel olarak deneyin

Gramer

HTMLElementObject.requestFullscreen()

Parametreler

Yok.

Teknik Ayrıntılar

Dönüş değeri: Dönüş değeri yok.

Tarayıcı Desteği

Tabloda belirtilen rakamlar, bu yöntemi tamamen destekleyen ilk tarayıcı sürümünü belirtir.

Yorum:Bazı tarayıcılar belirli bir öneki gerektirir (parantezlerde görüntülenir):

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
71.0
15.0 (webkit)		 79.0
11.0 (ms)		 64.0
9.0 (moz)		 6.0 (webkit) 58.0
15.0 (webkit)