Cara memanfaatkan API skrin penuh ... dan gaya

Mari kita lihat API skrin penuh di JavaScript. Ia membolehkan anda melakukan perkara yang cukup kuat: pemeriksaan penuh tepat satu elemen tertentu yang anda mahukan. Bukan itu sahaja, tetapi CSS dapat membantu dengan pemilih khas.

Setiap pelayar utama mempunyai fungsi skrin penuh terbina dalam bentuk memaksimumkan tetingkap penyemak imbas itu sendiri. Anda menekan F11 atau ⌃⌘F (Winkey ⬆ pada PC) dan penyemak imbas akan mengisi monitor anda, pergi sejauh mengeluarkan komponen UI (seperti butang pengurusan tetingkap).

Apabila anda masuk ke mod skrin penuh, ia memaksimumkan ruang untuk laman web untuk dipaparkan, tetapi ini tidak selalu tepat apa yang anda mahukan. Selalunya, anda mahu penuh dengan skrin beberapa elemen tertentu halaman, contohnya, video atau permainan. Di sinilah API skrin penuh berguna.

API skrin penuh membantu mencapai sesuatu yang mod skrin penuh penyemak imbas tidak dapat, seperti:

• FullScreen Satu elemen khusus halaman dan bukan keseluruhan halaman.
• Elemen perlawanan dalam CSS dengan kelas pseudo penuh skrin, yang memeriksa jika bendera skrin penuh elemen tertentu ditetapkan.
• Kawalan penuh apabila memasuki skrin penuh.

Mari Lakukan

Pertama, tentukan unsur apa yang perlu ditunjukkan dalam mod skrin penuh. Selepas itu, satu -satunya perkara adalah untuk memeriksa sama ada elemen itu mempunyai kaedah RequesFulLScreen (), dan kemudian panggilnya pada elemen.

Mari kita mulakan dengan elemen

yang mudah untuk skrin penuh:

 <div> </div>

Pertama, kami akan memilihnya dan periksa sama ada ia mempunyai kaedah. Sekiranya ia berlaku, maka kami memanggil kaedah RequestFullScreen di atasnya. Itu sederhana:

 Biarkan FullScreen = Document.QuerySelector ("#FullScreen");

jika (fullscreen.requestfullscreen) {
  fullScreen.RequestFulLScreen ();
}

Tetapi, kami mahu menjalankan kod ini secara kondusif dan tidak sebaik sahaja seseorang mendarat di halaman. Kami akan membuat butang yang bertukar mod skrin penuh.

 <dana>
  <utton> togol penuh skrin 
</utton></dana>

 Biarkan FullScreen = Document.QuerySelector ("#FullScreen");
biarkan butang = document.QuerySelector ("#butang");

Button.AdDeventListener ("klik", () => {
  jika (! document.fullscreenelement) {
    FullScreen? .RequestFulLScreen ();
  } else {
    document.ExitFulLScreen ();
  }
});

Perhatikan bagaimana kami menggunakan document.fullscreenelement. Sekiranya terdapat elemen yang telah menjadi skrin penuh sebelum ini, maka ia akan mengembalikannya; Jika tidak, ia akan kembali null.

Ia juga merupakan idea yang baik untuk memeriksa sama ada mod skrin penuh telah didayakan dalam penyemak imbas pengguna sama sekali. Untuk itu, kita boleh menggunakan document.fullscreenenabled. Ia mengembalikan boolean yang mengatakan sama ada atau tidak kita boleh menggunakan API skrin penuh dalam pelayar tertentu ini. Fullscreen boleh dilumpuhkan oleh pengguna, atau penyemak imbas mungkin tidak menyokongnya.

Kaedah terakhir yang akan kami sampaikan ialah Document.ExitFulLScreen (). Pengguna harus sentiasa mempunyai keupayaan untuk keluar dari mod skrin penuh dengan menekan ESC pada papan kekunci. Kami boleh melakukan beberapa cara tersuai untuk keluar dari mod skrin penuh menggunakan ExitFullScreen. Tidak kira apa elemen penuh skrin; Ia akan kembali ke mod tetingkap selepas memanggil kaedah ini.

Seperti yang dapat anda lihat dalam kod untuk elemen butang kami, kami mula -mula memeriksa jika skrin penuh telah diaktifkan. Kemudian, berdasarkan maklumat itu, kami pergi ke mod skrin penuh atau kami kembali ke mod tetingkap.

Skrin penuh gaya

Perkara yang sejuk mengenai API skrin penuh ialah kita dapat memadankan elemen skrin penuh dalam CSS. Itulah yang betul-betul: Pseudo-selektor skrin penuh direka untuk dilakukan!

 #fullscreen: Fullscreen {
  latar belakang warna: kuning;
}

Seperti yang anda lihat, #FullScreen Div adalah satu -satunya elemen yang mendapat warna latar belakang kuning apabila elemen berada dalam mod skrin penuh, dan hanya dalam mod skrin penuh. Penangkapan adalah bahawa kita tidak boleh memilih mana -mana elemen seperti ini; Kita hanya boleh memilih elemen akar tha t dalam mod skrin penuh. Tiada elemen kanak -kanak akan sepadan.

Dalam erti kata lain, sesuatu seperti #Button: Fullscreen tidak akan memilih butang yang terkandung dalam elemen skrin penuh - iaitu, melainkan jika kita mahu butang itu menjadi skrin penuh bukannya div.

Sesetengah pelayar memerlukan awalan untuk ini berfungsi. Penggunaan Firefox -Moz-Full-Screen dan Pelayar Berasaskan WebKit menggunakan -WebKit-Full-Screen.

 #fullscreen: -Webkit-full-Screen {
  latar belakang warna: kuning;
}

#fullscreen: -moz-full-screen {
  latar belakang warna: kuning;
}

Adakah anda tahu bahawa apabila kami berada dalam mod skrin penuh bahawa terdapat elemen pseudo yang diberikan tepat di bawah elemen skrin penuh anda? Secara lalai bahawa pseudo-elemen hitam. Sekiranya anda ingin menukar gaya-elemen pseudo itu, anda boleh melakukannya seperti ini:

 #fullscreen :: latar belakang {
  latar belakang warna: SkyBlue;
}

Inilah contoh terakhir. Perlu diingat bahawa mod skrin penuh mungkin tidak berfungsi dengan pena tertanam, jadi anda perlu melihatnya di luar artikel ini.

Atas ialah kandungan terperinci Cara memanfaatkan API skrin penuh ... dan gaya. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!