Uji coba origin baru untuk jendela pop-up layar penuh

Thomas Steiner

Bayangkan Anda ingin membuka jendela pop-up dalam mode layar penuh. Sampai saat ini, membuka jendela pop-up layar penuh terdiri dari dua langkah:

  1. Dari jendela aplikasi utama, memanggil metode window.open() yang memerlukan gestur pengguna seperti klik pada tombol Buka jendela pop-up.
  2. Dari jendela pop-up, memanggil metode Element.requestFullscreen(), yang juga memerlukan gestur pengguna seperti mengklik tombol Masuk mode layar penuh.

Kini tersedia uji coba origin baru yang berjalan dari Chrome 119 (tanggal stabil): 31 Oktober 2023 hingga Chrome 122 (tanggal stabil): 31 Oktober 2023 untuk membuka jendela pop-up dalam mode layar penuh hanya dengan satu langkah. Klik Register di halaman landing uji coba origin Open popups as fullscreen windows untuk mendaftar. Selain uji coba origin, Anda juga dapat menguji secara lokal dengan menyetel flag chrome://flags/#fullscreen-popup-windows ke Enabled.

Membuka jendela pop-up layar penuh di layar saat ini

Fitur baru ini dibatasi dengan izin window-management. Setelah pengguna memberikan izin, Anda dapat membuka jendela pop-up layar penuh seperti dalam contoh berikut.

document.querySelector('.fullscreen-popoup-button').addEventListener('click', async (e) => {
  if ((await navigator.permissions.query({name: 'window-management'})).state !== 'granted') {
    // Permission not granted. Call `window.getScreenDetails()` to prompt.
    await window.getScreenDetails();
  }
  // Permission granted. Open the fullscreen popup window.
  window.open('https://example.com/popup.html', '_blank', 'popup,fullscreen');
});

Di baris terakhir contoh kode, parameter pertama adalah url untuk dibuka di jendela pop-up. Parameter kedua adalah target, dengan nilai khusus _blank. Parameter ketiga adalah untuk windowFeatures, string yang dipisahkan koma dengan nilai popup untuk membuka jendela pop-up dan nilai baru fullscreen untuk membuka jendela pop-up dalam mode layar penuh. Fitur ini hanya berfungsi dengan satu gestur pengguna, sehingga dapat diaktifkan dengan sekali klik pada satu tombol.

Membuka jendela pop-up layar penuh di layar lain

Fitur ini sangat cocok jika dikombinasikan dengan Window Management API yang memungkinkan Anda mendapatkan informasi tentang semua layar yang telah dihubungkan oleh pengguna ke komputernya. Misalnya, untuk membuka jendela pop-up layar penuh di layar yang berbeda dengan layar pengguna saat ini, Anda harus menemukan layar lain terlebih dahulu, lalu meneruskan nilai availLeft, availTop, availWidth, dan availHeight ke nilai left, top, width, dan height yang sesuai dari string windowFeatures.


document.querySelector('.fullscreen-popoup-button-other-screen').addEventListener('click', async (e) => {
  const screenDetails = await window.getScreenDetails();
  ​​const otherScreen = screenDetails.screens.find(s => s !== screenDetails.currentScreen);
  window.open('https://example.com/popup.html', '_blank', `left=${otherScreen.availLeft},` +
      `top=${otherScreen.availTop},` +
      `width=${otherScreen.availWidth},` +
      `height=${otherScreen.availHeight},` +
      `fullscreen`);
});

Demo

Coba jendela pop-up layar penuh di demo dan lihat kode sumbernya. Pastikan untuk mencentang kotak layar penuh dan tombol Pop-up layar penuh, serta, jika Anda bisa, bermainlah demo dengan beberapa layar yang terpasang ke perangkat Anda.

Ucapan terima kasih

Artikel ini ditinjau oleh Brad Triebwasser, Hakan Isbiliroglu, Mike Wasserman, dan Rachel Andrew.