Uji coba origin baru untuk jendela pop-up layar penuh

Thomas Steiner

Bayangkan Anda ingin membuka jendela pop-up dalam mode layar penuh. Hingga 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 klik pada tombol Enter fullscreen mode.

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 Daftar di halaman landing uji coba origin Buka pop-up sebagai jendela layar penuh untuk mendaftar. Selain uji coba origin, Anda juga dapat menguji secara lokal dengan menetapkan tanda 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 pada 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');
});

Pada baris terakhir contoh kode, parameter pertama adalah url yang akan 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. Ini berfungsi hanya dengan satu gestur pengguna, sehingga dapat diaktifkan dengan sekali klik pada tombol.

Membuka jendela pop-up layar penuh di layar lain

Fitur ini sangat efektif jika dikombinasikan dengan Window Management API yang memungkinkan Anda mendapatkan informasi tentang semua layar yang telah dihubungkan pengguna ke komputer mereka. Misalnya, untuk membuka jendela pop-up layar penuh di layar lain selain layar pengguna saat ini, Anda harus terlebih dahulu menemukan layar lain 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, dan, jika Anda memiliki kesempatan, mainkan 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.