Hoe OM - Volskerm
Leer hoe om 'n volskermvenster met JavaScript te maak.
Volskerm-venster
Hoe om JavaScript te gebruik om 'n element in volskermmodus te sien.
Klik op die knoppie om die video in volskermmodus oop te maak:
Volskerm video
Om 'n element in volskerm oop te maak, gebruik ons die element.requestFullscreen()
metode:
Voorbeeld
<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>
Volskerm dokument
Om die hele bladsy in volskerm oop te maak, gebruik die document.documentElement
in plaas van . In hierdie voorbeeld gebruik ons ook 'n toemaakfunksie om die volskerm toe te maak:document.getElementById("element")
Voorbeeld
<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>
Jy kan ook CSS gebruik om die bladsy te stileer wanneer dit in volskermmodus is:
Voorbeeld
/* Safari */
:-webkit-full-screen {
background-color: yellow;
}
/* IE11 */
:-ms-fullscreen {
background-color: yellow;
}
/* Standard syntax */
:fullscreen {
background-color: yellow;
}
Verwante bladsye
HTML DOM Verwysing: Die requestFullscreen() metode .
HTML DOM Verwysing: Die exitFullscreen() metode .
HTML DOM-verwysing: Die documentElement-eienskap .