Kaedah, sifat dan acara JavaScript untuk mengawal skrin penuh penyemak imbas dan pelbagai kemahiran mod skrin penuh_javascript pelayar

Skrin penuh dalam HTML 5 pada masa ini boleh digunakan dalam penyemak imbas selain daripada IE dan Opera Ia kadangkala digunakan untuk API skrin penuh, permainan, dll. Ia sangat berguna. Mari lihat API biasa dahulu

element.requestFullScreen()

Fungsi: Minta skrin penuh elemen tertentu

Document.getElementById(“myCanvas”).requestFullScreen()

Berikut ialah ID elemen untuk meminta skrin penuh

Keluar daripada skrin penuh

document.cancelFullScreen()

Dokumen.Skrin penuh

Mengembalikan benar jika pengguna berada dalam mod skrin penuh

document.fullScreenElement

Mengembalikan elemen pada masa ini dalam mod skrin penuh

Kod berikut menghidupkan mod skrin penuh:

function fullScreen(element) { 
  if(element.requestFullScreen) { 
  element.requestFullScreen(); 
 } else if(element.webkitRequestFullScreen ) { 
   element.webkitRequestFullScreen(); 
  } else if(element.mozRequestFullScreen) { 
  element.mozRequestFullScreen(); 
 } 
 } 

Kod berikut adalah untuk memanggil mod skrin penuh untuk keseluruhan halaman

Tetapi sejujurnya, terdapat masalah dengan SKRIN PENUH, yang boleh membawa kepada penipuan dengan mudah, seperti dalam
http://feross.org/html5-fullscreen-api-attack/, terdapat DEMO yang baik untuk menipu, contohnya, pautan menyatakan http: //www.bankofamerica.com, semua orang fikir ia adalah Bank of America Sebaik sahaja anda masuk, ia akan menipu orang kerana ia menggunakan API skrin penuh

$('html').on('click keypress', 'a', function(event) { 
  // 不响应真正的A HREF点击事件 
 event.preventDefault(); 
  event.stopPropagation(); 
  // Trigger fullscreen 
  if (elementPrototype.requestFullscreen) { 
   document.documentElement.requestFullscreen(); 
  } else if (elementPrototype.webkitRequestFullScreen) { 
   document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT); 
  } else if (elementPrototype.mozRequestFullScreen) { 
   document.documentElement.mozRequestFullScreen(); 
  } else { 
   // 
  } 
  //显示假的UI 
  $('#menu, #browser').show(); 
  $('#target-site').show(); 
 }); 

Berikut ialah pengenalan kepada kaedah, sifat dan peristiwa JavaScript untuk mengawal mod skrin penuh pelbagai pelayar

Permintaan fungsi permulaan mod skrin penuh penyemak imbasSkrin penuh masih perlu disertakan dengan awalan dialek js setiap penyemak imbas Saya percaya kod berikut memerlukan anda banyak mencari untuk mendapatkannya:

Kodnya adalah seperti berikut:

// 判断各种浏览器，找到正确的方法
function launchFullscreen(element) {
 if(element.requestFullscreen) {
  element.requestFullscreen();
 } else if(element.mozRequestFullScreen) {
  element.mozRequestFullScreen();
 } else if(element.webkitRequestFullscreen) {
  element.webkitRequestFullscreen();
 } else if(element.msRequestFullscreen) {
  element.msRequestFullscreen();
 }
}
// 启动全屏!
launchFullScreen(document.documentElement); // 整个网页
launchFullScreen(document.getElementById("videoElement")); // 某个页面元素

Panggil kaedah skrin penuh pada elemen halaman yang ingin anda paparkan dalam skrin penuh Tetingkap penyemak imbas akan menjadi skrin penuh, tetapi pengguna akan diminta untuk membenarkan mod skrin penuh terlebih dahulu. Harap maklum bahawa pengguna berkemungkinan besar akan menolak mod skrin penuh. Jika pengguna berjalan dalam mod skrin penuh, bar alat penyemak imbas dan menu butang lain akan disembunyikan dan halaman anda akan meliputi keseluruhan skrin.

Keluar daripada mod skrin penuh

Kaedah exitFullscreen ini (yang juga memerlukan awalan penyemak imbas) akan menyebabkan penyemak imbas keluar daripada mod skrin penuh dan bertukar kepada mod biasa.

Kodnya adalah seperti berikut:

// 判断浏览器种类
function exitFullscreen() {
 if(document.exitFullscreen) {
  document.exitFullscreen();
 } else if(document.mozCancelFullScreen) {
  document.mozCancelFullScreen();
 } else if(document.webkitExitFullscreen) {
  document.webkitExitFullscreen();
 }
}
// 退出全屏模式!
exitFullscreen();

Perlu diambil perhatian bahawa exitFullscreen hanya boleh dipanggil oleh objek dokumen, bukan objek yang diluluskan semasa memulakan skrin penuh.

Sifat dan acara skrin penuh

Malangnya, sifat skrin penuh dan kaedah berkaitan acara itu juga memerlukan awalan penyemak imbas untuk ditambahkan, tetapi saya percaya ini tidak akan diperlukan tidak lama lagi.

1.document.fullScreenElement: Elemen halaman web dipaparkan dalam skrin penuh.
2.document.fullScreenEnabled: Tentukan sama ada pada masa ini dalam keadaan skrin penuh.

Acara pertukaran skrin penuh dicetuskan apabila skrin penuh dimulakan atau skrin penuh dikeluarkan:

Kodnya adalah seperti berikut:

var fullscreenElement = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement;
var fullscreenEnabled = document.fullscreenEnabled || document.mozFullScreenEnabled || document.webkitFullscreenEnabled;

Anda masih boleh menggunakan kaedah di atas untuk menentukan jenis penyemak imbas untuk mengawal acara ini.

CSS gaya skrin penuh

Pelbagai pelayar menyediakan peraturan gaya CSS yang sangat berguna untuk mod skrin penuh:

Kodnya adalah seperti berikut::

-webkit-full-screen {

 /* properties */
}
:-moz-full-screen {
 /* properties */
}
:-ms-fullscreen {
 /* properties */
}
:full-screen { /*pre-spec */
 /* properties */
}
:fullscreen { /* spec */
 /* properties */
}
/* deeper elements */
:-webkit-full-screen video {
 width: %;
 height: %;
}
/* styling the backdrop*/
::backdrop {
 /* properties */
}
::-ms-backdrop {
 /* properties */
}

Dalam sesetengah kes, gaya WebKit boleh menyebabkan masalah, dan lebih baik anda memastikan gaya ini mudah.

API skrin penuh ini sangat mudah dan sangat berguna. Saya mula-mula melihat API ini dalam demo BananaBread MDN Ia adalah permainan menembak yang hanya perlu menjadi skrin penuh Ia menggunakan pendengaran acara untuk mengesan keadaan skrin penuh. Ingat API berguna ini dan anda boleh menggunakannya apabila diperlukan.