Salinan kode adalah sebagai berikut:
// menilai berbagai browser dan menemukan metode yang benar
function launchfullscreen (elemen) {
if (element.requestfullScreen) {
element.RequestfullScreen ();
} else if (element.mozrequestfullScreen) {
element.mozrequestfullScreen ();
} else if (element.webkitrequestfullscreen) {
element.webkitrequestfullScreen ();
} else if (element.msrequestfullScreen) {
element.msrequestfullScreen ();
}
}
// Mulai layar penuh!
LaunchfullScreen (Document.DocumentElement);
LaunchfullScreen (Document.GetElementById ("VideoElement"));
Hubungi metode layar penuh pada elemen halaman yang ingin Anda tampilkan di layar penuh, dan jendela browser akan menjadi layar penuh, tetapi pengguna pertama -tama akan meminta untuk mengizinkan mode layar penuh. Ketahuilah bahwa pengguna cenderung menolak mode layar penuh. Jika pengguna menjalankan mode layar penuh, bilah alat browser dan menu tombol lainnya akan disembunyikan dan halaman Anda akan menutupi seluruh layar.
Keluar dari mode layar penuh
Metode ExitufullScreen ini (yang juga membutuhkan awalan browser) akan menyebabkan browser keluar dari mode layar penuh dan menjadi mode normal.
Salinan kode adalah sebagai berikut:
// Tentukan jenis browser
fungsi exitfullscreen () {
if (document.exitfullscreen) {
document.exitfullScreen ();
} else if (document.mozcancelfullscreen) {
document.mozcancelfullscreen ();
} else if (document.webkitexitfullscreen) {
document.webkitexitfullscreen ();
}
}
// Keluar dari mode layar penuh!
ExitfullScreen ();
Perlu dicatat bahwa ExitfullScreen hanya dapat dipanggil oleh objek dokumen, daripada objek yang dilewati saat memulai layar penuh.
Properti dan acara layar penuh
Sayangnya, properti layar penuh dan metode terkait untuk acara juga memerlukan awalan browser, tetapi saya percaya ini tidak akan segera dibutuhkan.
1.Document.FullScreeNeLement: Elemen halaman web layar penuh.
2.Document.FullScreEnenabled: Menentukan apakah saat ini ada di layar penuh.
Acara fullscreenchange akan dipicu ketika layar penuh dimulai atau keluar:
Salinan kode adalah sebagai berikut:
var fullscreeNeLement = document.fullScreEnelement || document.mozfullScreeNeLement ||
var fullscreeNeNabled = document.fullScreeNeNeNabled ||
Anda masih dapat mengawali acara ini menggunakan metode di atas untuk menentukan jenis browser.
CSS Gaya Layar Penuh
Berbagai browser memberikan aturan gaya CSS yang sangat berguna dalam mode layar penuh:
Salin kode sebagai berikut ::-WebKit-full-screen {
/ * properti */
}
: -moz-full-screen {
/ * properti */
}
: -ms-fullscreen {
/ * properti */
}
: layar penuh { / *pra-spec * /
/ * properti */
}
: fullscreen { / * spec * /
/ * properti */
}
/ * elemen yang lebih dalam */
: -webkit-full-screen video {
Lebar: 100%;
Tinggi: 100%;
}
/* menata latar belakang*/
:: latar belakang {
/ * properti */
}
::-ms-backdrop {
/ * properti */
}
Dalam beberapa kasus, ada beberapa masalah dengan gaya webkit, dan Anda sebaiknya menjaga gaya ini sederhana.
API layar penuh ini sangat sederhana dan sangat berguna. Pertama kali saya melihat API ini dalam demo BananaBread MDN, itu adalah permainan penembakan yang kebetulan adalah layar penuh, yang menggunakan acara mendengarkan untuk mendeteksi keadaan layar penuh. Ingat API yang bermanfaat ini, Anda dapat mengambilnya saat Anda membutuhkannya.