Di tempat kerja hari ini, saya menemukan kebutuhan untuk tampilan halaman web layar penuh, jadi saya memeriksa Baidu dan menemukan plugin jQuery untuk tampilan halaman web layar penuh: jquery FullScreen Plugin. Ini memungkinkan tampilan halaman web layar penuh untuk berbagai browser yang berbeda, termasuk FF 10, Chrome, dan Safari, dan digunakan untuk memberi pengguna versi halaman web yang lebih mudah dibaca yang dapat diskalakan <canvas>dan <video>dielemen.
Plugin Layar Penuh jQuery
Deskripsi
Plugin jQuery ini menyediakan mekanisme yang mudah digunakan untuk mengontrol mode layar penuh baru dari browser modern. Saat ini hanya browser berbasis Webkit yang lebih baru (Seperti Chrome dan Safari), Firefox dan IE11+ yang menyediakan fitur layar penuh baru ini.
penggunaan
Memasuki mode Layar Penuh
Anda dapat mengalihkan seluruh halaman atau satu elemen HTML ke mode layar penuh:
$(dokumen).fullScreen(true); $("#myVideo").fullScreen(true); Ini hanya berfungsi jika kode dipicu oleh interaksi pengguna (Misalnya, peristiwa onclick pada tombol). Browser tidak mengizinkan masuk ke mode layar penuh tanpa interaksi pengguna.
Keluar dari mode Layar Penuh
Mode layar penuh selalu keluar melalui dokumen tetapi plugin ini juga mengizinkannya melalui elemen HTML apa pun. Dokumen pemilik elemen HTML yang dipilih digunakan kemudian:
$(dokumen).fullScreen(salah); $("#myVideo").fullScreen(false); Mengkueri mode Layar Penuh
Cukup berikan argumen ke metode fullScreen untuk mengkueri status saat ini. Metode ini mengembalikan elemen layar penuh saat ini (atau benar jika browser tidak mendukung ini) saat mode layar penuh aktif, false jika tidak aktif atau null saat browser tidak mendukung layar penuh mode sama sekali. Jadi Anda dapat menggunakan metode ini juga untuk menampilkan tombol layar penuh hanya ketika browser mendukung mode layar penuh:
$("#fullscreenButton").toggle($(document).fullScreen() != null)) Beralih mode Layar Penuh
Plugin ini menyediakan metode lain untuk beralih mode layar penuh sederhana:
$(dokumen).toggleFullScreen(); Pemberitahuan
Plugin memicu peristiwa fullscreenchange pada dokumen saat mode layar penuh telah diubah. Jika browser menolak perubahan status layar penuh, plugin akan memicu peristiwa fullscreenerror pada dokumen. Contoh:
$(document).bind("fullscreenchange", function() { console.log("Layar Penuh " + ($(dokumen).Layar penuh () ? " on" : "off")); });
$(document).bind("fullscreenerror", function() { peringatan("Browser menolak perubahan layar penuh"); }); iframe layar penuh
Memasuki mode layar penuh dari dalam iframe tidak diizinkan secara default tetapi dapat diaktifkan dengan beberapa atribut pada iframe:
<iframe src="iframe.html" webkitAllowFullScreen mozAllowFullScreen allowFullScreen> </iframe> Masalah umum
Di IE 11, halaman kosong ditampilkan saat memasuki layar penuh dari dalam iframe. Tidak tahu mengapa. Bantuan apa pun dipersilakan. Di Safari (Setidaknya di Safari 7) tidak ada input keyboard yang diizinkan dalam mode layar penuh.
Alamat GitHub: https://github.com/kayahr/jquery-fullscreen-plugin
Wisatawan, jika Anda ingin melihat konten tersembunyi dari posting ini, silakan Jawab
|