API skrin penuh untuk pengalaman mendalam

API skrin penuh membolehkan kandungan web dipaparkan dalam skrin penuh, meningkatkan rendaman aplikasi seperti video dan permainan; Gunakan elemen.RequestFulLScreen () untuk meminta skrin penuh, Document.ExitFulLScreen () untuk keluar dari skrin penuh, dengar perubahan skrin penuh untuk mendapatkan perubahan keadaan, Document.FullScreenElement Mengembalikan elemen skrin penuh semasa; Beri perhatian kepada keserasian pelayar, dan kaedah awalan seperti MozRequestfullscreen, WebKitRequestfullscreen, dan lain -lain harus dikemas; Operasi skrin penuh mesti dicetuskan oleh gerak isyarat pengguna, seperti peristiwa klik, panggilan automatik dilarang; Dalam aplikasi sebenar, penukaran nama kelas boleh digabungkan dengan pengoptimuman UI, sesuai untuk pemain, permainan, persembahan, dan penonton gambar, dan lain -lain, dan pengalaman pengguna dapat diperbaiki dengan ketara melalui penggunaan yang munasabah.

API Fullscreen membolehkan aplikasi web memaparkan kandungan dalam mod skrin penuh, menjadikan pengguna pengalaman yang lebih mendalam. Ini amat berguna untuk adegan seperti pemain video, permainan dalam talian, persembahan dan penonton imej. Melalui antara muka JavaScript yang mudah, pemaju dapat mengawal elemen halaman untuk memasuki atau keluar dari keadaan skrin penuh, meningkatkan kepekatan pengguna dan pengalaman interaktif.

Cara Menggunakan API Fullscreen

API skrin penuh tidak rumit, dan kaedah dan sifat teras dipasang pada objek document . Ia melibatkan perkara utama berikut:

• Minta skrin penuh : Gunakan element.requestFullscreen() untuk mendapatkan elemen ke dalam skrin penuh.
• Keluar Skrin Penuh : Hubungi document.exitFullscreen() untuk keluar dari mod skrin penuh.
• Pemantauan Negeri Skrin Penuh : Balas perubahan keadaan fullscreenchange dengan mendengar perubahan skrin penuh.
• Elemen Skrin Penuh Semasa : document.fullscreenElement Mengembalikan elemen yang kini berada dalam keadaan skrin penuh, dan jika tiada, kembali null .

 const elem = document.getElementById ('container');

// Permintaan untuk memasukkan fungsi skrin penuh OpenFullScreen () {
  jika (elem.requestfullscreen) {
    elem.RequestFulLScreen ();
  }
}

// keluar dari fungsi skrin penuh CloseFullScreen () {
  jika (document.exitfullscreen) {
    document.ExitFulLScreen ();
  }
}

// Dengarkan Dokumen Perubahan Negeri Skrin Penuh.AddEventListener ('FullScreenChange', () => {
  jika (document.fullscreenelement) {
    Console.log ('Masukkan Skrin Penuh:', Document.FullScreenElement);
  } else {
    console.log ('keluar skrin penuh');
  }
});

Keserasian penyemak imbas dan pemprosesan awalan

Walaupun pelayar moden umumnya menyokong API skrin penuh, beberapa pelayar masih perlu menggunakan kaedah awalan. Untuk memastikan keserasian, adalah disyorkan untuk menilai dan merangkum:

 fungsi launchfullscreen (elemen) {
  jika (element.requestfullscreen) {
    elemen.RequestFulLScreen ();
  } else if (element.mozrequestfullscreen) {// firefox
    elemen.MozRequestFulLScreen ();
  } else if (element.webkitRequestfullscreen) {// chrome, safari, opera
    element.webKitRequestFulLScreen ();
  } else if (element.msrequestfullscreen) {// ie/edge
    elemen.msRequestFulLScreen ();
  }
}

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 ();
  }
}

Sekatan isyarat pengguna dan dasar keselamatan

Untuk pertimbangan keselamatan dan pengalaman pengguna, penyemak imbas memerlukan operasi skrin penuh mesti dicetuskan oleh gerak isyarat pengguna (seperti klik, sentuhan) dan tidak boleh dilakukan secara automatik oleh halaman. Sebagai contoh, kod berikut tidak akan berkuatkuasa:

 // ❌ Tidak sah: Secara automatik hubungi window.onload = () => {
  elem.RequestFulLScreen ();
};

Dan ini ok:

 // ✅ sah: Pengguna klik mencetuskan butang.addeventListener ('klik', () => {
  elem.RequestFulLScreen ();
});

Di samping itu, sesetengah pelayar akan memaparkan bar segera apabila memasuki skrin penuh, membolehkan pengguna menekan Esc atau F11 untuk keluar.

Cadangan untuk senario aplikasi praktikal

• Pemain Video : Klik butang "Skrin Penuh" dan paparkan kawasan main balik dalam skrin penuh. Sembunyikan bar kawalan dan pudar selepas beberapa saat untuk meningkatkan pengalaman tontonan.
• Permainan Dalam Talian : Sebelum memulakan permainan, pastikan pengguna untuk mengklik butang untuk memasukkan skrin penuh untuk mengelakkan secara tidak sengaja menyentuh dan keluar.
• Sistem Demo : Digabungkan dengan peristiwa papan kekunci (seperti mengubah kekunci anak panah) untuk memberikan pengalaman melayari yang lebih fokus dalam skrin penuh.
• Penonton Imej : Klik imej dan zum masuk dan paparkannya dalam skrin penuh, menyokong penukaran anak panah kiri dan kanan.

Anda juga boleh menyesuaikan UI secara dinamik apabila skrin penuh:

 document.addeventListener ('fullScreenChange', () => {
  const isinfullscreen = !! document.fullscreenelement;
  document.body.classlist.toggle ('fullscreen-mode', isinfullscreen);
  // Anda boleh menyembunyikan bar navigasi, menyesuaikan font, dan lain -lain});

Pada dasarnya itu sahaja. API skrin penuh mudah digunakan, tetapi dapat meningkatkan pengalaman pengguna dalam senario tertentu. Fungsi immersive boleh dilaksanakan dengan selamat dan boleh dipercayai selagi anda memberi perhatian kepada sekatan yang dicetuskan oleh pengguna dan pemprosesan keserasian.

Atas ialah kandungan terperinci API skrin penuh untuk pengalaman mendalam. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!