Membuat Fullscreen HTML Menggunakan fullscreenElement DOM
Baca Juga:
<!DOCTYPE html>
<html>
<head>
<title>
method fullscreenElement
</title>
</head>
<body>
<h1 style="color: green">
Blog Elfan
</h1>
<p>
<b>
method fullscreenElement
</b>
</p>
<p>
Elemen fulscreen saat ini akan
muncul pada console setelah 5
detik.
</p>
<img id="image" src=
"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgtScPwjtA7g64aDduxeEd6YdFJqUYA2IU0Vv2ysXZEw4PVziHYCoGp4SRQh6zz0BhzgZJ07-_-0M7-Hj70c0nWxZ85Iz3icubb5fR-UJYoreKKAk9JDuitrkcAX1yCKoeO93LrxHwgps/s2048/logo%2Bsman%2B8%2Bsemarang.png" />
<br>
<button onclick="goFullScreen();">
Mode fullscreen
</button>
<script>
/* Log elemen saat ini dalam
mode fullscreen */
function checkFullscreenElement()
{
console.log(
/* Sintak Standar */
document.fullscreenElement ||
/* Sintak untuk Browser
Chrome, Safari, dan Opera */
document.webkitFullscreenElement ||
/* Sintak Firefox */
document.mozFullScreenElement ||
/* Sintak IE/Edge */
document.msFullscreenElement)
}
/* Memanggil fungsi tersebut
setelah 5 detik, user tidak
dapat menekan tombol apapun
untuk mengeksekusi fungsi
selama dalam mode fullscreen
*/
setTimeout(checkFullscreenElement, 5000);
/* Go fullscreen */
function goFullScreen()
{
if (
/* Sintak Standar */
document.fullscreenEnabled ||
/* Sintak Chrome, Safari, dan
Opera */
document.webkitFullscreenEnabled ||
/* Sintak Firefox */
document.mozFullScreenEnabled ||
/* Sintak IE/Edge */
document.msFullscreenEnabled)
{
elem = document.querySelector('#image');
/* Try mode Fullscreen */
elem.requestFullscreen();
}
else
{
console.log('Fullscreen tidak tersedia saat ini.')
}
}
</script>
</body>
</html>
- 2 Contoh Penggunaan Method getElementsByTagName() DOM pada HTML
- 2 Contoh Penggunaan Method hasFocus() DOM pada HTML
- Cara Penggunaan Properti Head DOM pada HTML
- 3 Contoh Penggunaan Properti Image Collection DOM pada HTML
- 2 Contoh Penggunaan Properti Implementation DOM pada HTML
- 2 Contoh Penggunaan Method importNode() DOM pada HTML
- Cara Penggunaan Properti inputEncoding DOM pada HTML
5 komentar untuk "Membuat Fullscreen HTML Menggunakan fullscreenElement DOM"
Hubungi admin melalui Wa : +62-896-2414-6106
Respon komentar 7 x 24 jam, mohon bersabar jika komentar tidak langsung dipublikasi atau mendapatkan balasan secara langsung.
Bantu admin meningkatkan kualitas blog dengan melaporkan berbagai permasalahan seperti typo, link bermasalah, dan lain sebagainya melalui kolom komentar.
- Ikatlah Ilmu dengan Memostingkannya -
- Big things start from small things -
Apa fungsi fullscreenElement pada html?
BalasHapusProperti fullscreenElement berfungsi untuk mengembalikan elemen saat ini yang ditampilkan dalam mode layar penuh, atau null saat tidak dalam mode tersebut.
HapusProperti fullscreenElement berfungsi untuk mengembalikan elemen yang saat ini dijasikan dalam mode layar penuh dalam dokumen saat ini, atau akan memberikan nilai null jika mode layar penuh sedang tidak digunakan.
HapusMeskipun hanya bersifat read-only, properti ini tidak akan dibuang jika dimodifikasi atau bahkan dalam mode strict.
Jenis browser apa saja yang dapat digunakan untuk mengaktifkan fungsi fullscreenElement pada html?
BalasHapusBerikut adalah beberapa jenis browser populer dan dapat digunakan untuk mengaktifkan fungsi fullscreenElement pada html:
Hapus1. Google Chrome 45.0
2. Internet Explorer 11.0
3. Firefox 47.0
4. Opera 15.0
5. Safari 5.1