Untuk membuat Skrin Penuh Elemen HTML, anda perlu memanggil kaedah RequestFullScreen () elemen di bawah mencetuskan operasi pengguna (seperti klik) dan bersesuaian dengan awalan pelayar seperti WebKit, Moz, dan MS; 2. Anda boleh keluar dari skrin penuh melalui Document.ExitFulLScreen (); 3. Anda boleh menggunakan kelas pseudo penuh skrin untuk menambah gaya kepada unsur-unsur dalam keadaan skrin penuh, dan API menyokong terhad pada terminal mudah alih, jadi anda perlu memberi perhatian kepada isu keserasian.
Untuk membuat elemen HTML pergi skrin penuh dalam pelayar web, anda menggunakan API Fullscreen , yang membolehkan anda untuk membuat program DOM secara programatik mengambil keseluruhan skrin. Inilah caranya untuk melakukannya dengan betul dan selamat.

? Menggunakan API Fullscreen
API skrin penuh menyediakan kaedah untuk memaparkan elemen dalam mod skrin penuh. Kaedah utama ialah requestFullscreen()
.
1. Penggunaan Asas
<div id = "myelement"> <p> Elemen ini akan menjadi skrin penuh. </P> <butang onclick = "gofullscreen ()"> pergi penuh skrin </butang> </div> <script> fungsi gofullscreen () { const elem = document.getElementById ("myElement"); jika (elem.requestfullscreen) { elem.RequestFulLScreen (); } else if (elem.mozrequestfullscreen) { / * firefox * / elem.MozRequestFulLScreen (); } else if (elem.webkitRequestfullscreen) { / * chrome, safari & opera * / elem.webKitRequestFullScreen (); } else if (elem.msrequestfullscreen) {/ * ie/edge */ elem.msRequestfullScreen (); } } </script>
Nota : Sentiasa hubungi
requestFullscreen()
sebagai tindak balas kepada tindakan pengguna (seperti klik), jika tidak, penyemak imbas akan menyekatnya untuk alasan keselamatan.
? Onton mengendalikan awalan penyemak imbas (untuk keserasian)
Walaupun penyemak imbas moden menyokong requestFullscreen
tanpa awalan, versi lama memerlukan awalan vendor:
-
requestFullscreen()
- Standard -
webkitRequestFullscreen()
- Chrome, Safari, Opera Baru -
mozRequestFullScreen()
- Firefox -
msRequestFullscreen()
- IE11 dan Edge (Legacy)
Anda boleh membungkusnya dalam fungsi pembantu kecil:

fungsi OpenFulLScreen (elemen) { jika (element.requestfullscreen) { elemen.RequestFulLScreen (); } else if (element.webkitRequestfullscreen) { element.webKitRequestFulLScreen (); } else if (element.mozrequestfullscreen) { elemen.MozRequestFulLScreen (); } else if (element.msRequestfullscreen) { elemen.msRequestFulLScreen (); } } // Penggunaan: const myDiv = document.getElementById ("MyElement"); OpenFullScreen (myDiv);
? Keluar dari mod skrin penuh
Anda boleh keluar dari skrin penuh menggunakan document.exitFullscreen()
:
document.ExitFulLScreen ();
Atau mengikatnya ke butang:
<Button onClick = "ExitFullScreen ()"> Keluar FullScreen </Button> <script> fungsi ExitFulLScreen () { jika (document.exitfullscreen) { document.ExitFulLScreen (); } else if (document.mozcancelfullscreen) { document.MozCanceLfulLScreen (); } else if (document.webkitexitfullscreen) { document.webKiteXitFulLScreen (); } else if (document.msexitfullscreen) { document.msexitfullscreen (); } } </script>
? Petua & gotchas
- ? Gerak isyarat pengguna diperlukan : Anda tidak boleh memasukkan skrin penuh tanpa tindakan pengguna langsung (klik, ketik, dll.).
- ? Fullscreen adalah per-dokumen : Hanya satu elemen yang boleh menjadi skrin penuh pada satu masa.
- ? Bergaya dalam skrin penuh : Anda mungkin mahu gaya elemen berbeza apabila skrin penuh menggunakan CSS:
#MyElement: Fullscreen { lebar: 100VW; Ketinggian: 100VH; Latar Belakang: Hitam; }
Anda juga boleh menggunakan versi vendor-prefixed seperti :-webkit-full-screen
jika diperlukan.
- ? Sokongan mudah alih : API Fullscreen berfungsi pada beberapa pelayar mudah alih, tetapi tingkah laku berbeza -beza. Safari di iOS mempunyai sokongan terhad.
? Ringkasan
Untuk membuat elemen HTML pergi skrin penuh:
- Panggil
element.requestFullscreen()
(dengan awalan untuk keserasian). - Mencetuskannya dari tindakan pengguna (misalnya, klik butang).
- Secara pilihan gaya elemen menggunakan
:fullscreen
. - Gunakan
document.exitFullscreen()
untuk meninggalkan skrin penuh.
Ia tidak rumit, tetapi memerlukan perhatian kepada sokongan penyemak imbas dan peraturan interaksi pengguna. Kebanyakan aplikasi moden (seperti pemain video) menggunakan API ini di bawah tudung.
Pada asasnya, hanya gunakan requestFullscreen()
pada acara yang dicetuskan pengguna-dan anda baik untuk pergi.
Atas ialah kandungan terperinci Cara membuat elemen html pergi skrin penuh. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Alat AI Hot

Undress AI Tool
Gambar buka pakaian secara percuma

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Clothoff.io
Penyingkiran pakaian AI

Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Artikel Panas

Alat panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas

Penggunaan rasional tag semantik dalam HTML dapat meningkatkan kejelasan struktur halaman, aksesibilitas dan kesan SEO. 1. Digunakan untuk blok kandungan bebas, seperti jawatan blog atau komen, ia mesti mandiri; 2. Digunakan untuk kandungan berkaitan klasifikasi, biasanya termasuk tajuk, dan sesuai untuk modul yang berlainan halaman; 3. Digunakan untuk maklumat tambahan yang berkaitan dengan kandungan utama tetapi tidak teras, seperti cadangan sidebar atau profil pengarang. Dalam perkembangan sebenar, label harus digabungkan dan lain -lain, elakkan bersarang yang berlebihan, pastikan struktur mudah, dan sahkan rasionalitas struktur melalui alat pemaju.

Struktur laman web perlu disokong oleh elemen HTML teras. 1. Struktur keseluruhan halaman terdiri daripada, yang merupakan unsur akar, yang menyimpan maklumat meta dan memaparkan kandungan; 2. Organisasi kandungan bergantung pada tajuk (-), perenggan () dan tag blok (seperti,) untuk meningkatkan struktur organisasi dan SEO; 3. Navigasi dilaksanakan melalui dan dilaksanakan, organisasi yang biasa digunakan dihubungkan dan ditambah dengan atribut aria-semasa untuk meningkatkan kebolehcapaian; 4. Borang Interaksi melibatkan, dan, untuk memastikan fungsi input dan penyerahan pengguna lengkap. Penggunaan unsur -unsur ini dapat meningkatkan kejelasan halaman, penyelenggaraan dan pengoptimuman enjin carian.

Klien-sideformvalidationcanbedonewithoutjavascriptbyusinghtmlattributes.1) userequiredtoenforcemandatory.2) valateateMailsandurlSwithtypeattributeseMailorurl, orusepatternwithregexforcustmin.3)

Untuk menggunakan elemen butang HTML untuk mencapai butang yang boleh diklik, anda mesti menguasai penggunaan asas dan langkah berjaga -jaga yang sama. 1. Buat butang dengan tag dan tentukan tingkah laku melalui atribut jenis (seperti butang, hantar, tetapkan semula), yang dikemukakan secara lalai; 2. Tambahkan fungsi interaktif melalui JavaScript, yang boleh ditulis dalam talian atau mengikat pendengar acara melalui ID untuk meningkatkan penyelenggaraan; 3. Gunakan CSS untuk menyesuaikan gaya, termasuk warna latar belakang, sempadan, sudut bulat dan kesan status hover/aktif untuk meningkatkan pengalaman pengguna; 4. Perhatikan masalah biasa: Pastikan atribut kurang upaya tidak didayakan, peristiwa JS terikat dengan betul, oklusi susun atur, dan gunakan bantuan alat pemaju untuk menyelesaikan masalah. Menguasai ini

Tag penutup diri adalah unsur-unsur dalam HTML yang tidak memerlukan tag tertutup kerana mereka tidak mengandungi kandungan. Contoh umum termasuk: ① Masukkan gambar; ② Tambah Break Line; ③ Buat garis mendatar; ④ Tentukan input borang; ⑤ menghubungkan sumber luaran; ⑥ Menyediakan metadata. Tag ini berfungsi melalui atribut seperti atau. Terdapat dua cara yang betul untuk menulis: sintaks HTML standard, seperti gaya XHTML, tetapi HTML5 mengesyorkan bekas. Perhatikan bahawa anda tidak boleh menggunakan borang tertutup sendiri pada label yang memerlukan kandungan pakej. Sekiranya kesilapan itu salah, ia harus ditukar kepada hello yang ditutup dengan betul. Penggunaan tag penutup diri yang betul membantu mengekalkan kod anda dengan mudah dan cekap, dan meningkatkan keserasian dengan alat lain seperti kerangka.

Gunakan tag dalam HTML untuk pilihan kumpulan dalam menu drop-down. Kaedah khusus adalah untuk membungkus sekumpulan elemen dan menentukan nama kumpulan melalui atribut label, seperti: 1 mengandungi pilihan seperti epal, pisang, oren, dan lain -lain; 2. Mengandungi pilihan seperti wortel, brokoli, dan sebagainya; 3. Nota termasuk: ① Tiada sarang disokong; ② Seluruh kumpulan boleh dilumpuhkan melalui atribut yang kurang upaya; ③ Gaya ini terhad dan perlu dihidupkan dalam kombinasi dengan CSS atau perpustakaan pihak ketiga; Plug-in seperti SELECT2 boleh digunakan untuk meningkatkan fungsi.

Untuk membenamkan video atau audio dengan sari kata dan trek audio ke dalam laman web, ia dapat dicapai melalui fungsi asli HTML. 1. Gunakan tag untuk menambah fail sari kata dalam format Webvtt dan tetapkan sifat, srclang dan label; 2. Menyokong subtitle pelbagai bahasa melalui pelbagai elemen, dan gunakan atribut lalai untuk menetapkan bahasa lalai; 3. Multi-trek boleh mengawal pelbagai elemen beralih melalui JavaScript, atau menggunakan penyelesaian sambungan media yang lebih kompleks; 4. Perhatikan keserasian penyemak imbas, konfigurasi laluan dan pengesahan format untuk memastikan operasi normal pada peranti yang berbeza dan menyediakan penyelesaian sandaran.

Apabila menghadapi kesilapan pengesahan HTML, anda mesti terlebih dahulu menjelaskan masalah dan membetulkannya mengikut spesifikasi. 1. Apabila atribut yang diperlukan hilang, SRC dan ALT dan HREF IMG perlu diselesaikan; 2. Apabila Nesting Tag tidak betul, struktur harus dijelaskan dan tag harus ditutup dengan betul untuk mengelakkan kekeliruan dalam unsur-unsur peringkat blok bersarang; 3. Apabila menggunakan tag yang tidak sah atau dibuang, anda harus merujuk kepada dokumen MDN untuk menggantikannya dengan kaedah penulisan moden, seperti menggantikan pusat dan fon dengan CSS; 4. Apabila masalah pengekodan aksara, tambah metacharset = "UTF-8" dan pastikan fail itu disimpan dalam format UTF-8 untuk menyelesaikannya.
