Nasıl Yapılır - Tam Ekran
JavaScript ile nasıl tam ekran pencere oluşturulacağını öğrenin.
Tam Ekran Penceresi
Bir öğeyi tam ekran modunda görüntülemek için JavaScript nasıl kullanılır?
Videoyu tam ekran modunda açmak için düğmeye tıklayın:
Tam Ekran Video
Bir öğeyi tam ekranda açmak için şu element.requestFullscreen()
yöntemi kullanırız:
Örnek
<script>
/* Get the element you want displayed in fullscreen mode (a
video in this example): */
var elem = document.getElementById("myvideo");
/* When the openFullscreen() function is executed, open the video in
fullscreen.
Note that we must include prefixes for different browsers, as
they don't support the requestFullscreen method yet */
function openFullscreen() {
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else
if (elem.webkitRequestFullscreen) { /* Safari */
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen)
{ /* IE11 */
elem.msRequestFullscreen();
}
}
</script>
Tam Ekran Belge
Tüm sayfayı tam ekran olarak açmak için document.documentElement
yerine kullanın . Bu örnekte, tam ekranı kapatmak için bir kapatma işlevi de kullanıyoruz:document.getElementById("element")
Örnek
<script>
/* Get the documentElement (<html>) to display the page in fullscreen */
var elem = document.documentElement;
/* View in fullscreen */
function openFullscreen() {
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.webkitRequestFullscreen)
{ /* Safari */
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen)
{ /* IE11 */
elem.msRequestFullscreen();
}
}
/*
Close fullscreen */
function closeFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitExitFullscreen)
{ /* Safari */
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) { /* IE11 */
document.msExitFullscreen();
}
}
</script>
Tam ekran modundayken sayfaya stil vermek için CSS'yi de kullanabilirsiniz:
Örnek
/* Safari */
:-webkit-full-screen {
background-color: yellow;
}
/* IE11 */
:-ms-fullscreen {
background-color: yellow;
}
/* Standard syntax */
:fullscreen {
background-color: yellow;
}
İlgili Sayfalar
HTML DOM Referansı: requestFullscreen() yöntemi .
HTML DOM Referansı: exitFullscreen() yöntemi .
HTML DOM Referansı: DocumentElement özelliği .