Tam ekran pop-up pencereler için yeni kaynak denemesi

Thomas Steiner

Bir pop-up pencereyi tam ekran modunda açmak istediğinizi varsayalım. Şimdiye kadar tam ekran pop-up pencere açmak iki adımdan oluşuyordu:

  1. Ana uygulama penceresinden, Pop-up pencereyi aç düğmesini tıklamak gibi bir kullanıcı hareketi gerektiren window.open() yöntemini çağırma.
  2. Pop-up pencereden Element.requestFullscreen() yöntemini çağırarak. Bu yöntem de Tam ekran moduna gir düğmesini tıklama gibi bir kullanıcı hareketi gerektirir.

Artık Chrome 119 (stabil sürüm tarihi: 31 Ekim 2023) ile Chrome 122 (stabil sürüm tarihi: 31 Ekim 2023) arasında pop-up pencereleri tek adımda tam ekran modunda açmanızı sağlayan yeni bir kaynak denemesi mevcuttur. Kaydolmak için Pop-up'ları tam ekran pencere olarak aç orijinal deneme sürümünün açılış sayfasında Kaydol'u tıklayın. Kaynak denemesinin yanı sıra chrome://flags/#fullscreen-popup-windows işaretini Etkin olarak ayarlayarak yerel olarak da test edebilirsiniz.

Geçerli ekranda tam ekran pop-up pencereleri açma

Bu yeni özellik, window-management iznine bağlıdır. Kullanıcı izin verdikten sonra aşağıdaki örnekte gösterildiği gibi tam ekran bir pop-up pencere açabilirsiniz.

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

Kod örneğinin son satırında, ilk parametre pop-up pencerede açılacak url öğesidir. İkinci parametre, _blank özel değerine sahip target bağımsız değişkenidir. Üçüncü parametre, pop-up pencereyi açmak için popup değerini ve pop-up pencereyi tam ekran modunda açmak için yeni değeri fullscreen içeren, virgülle ayrılmış bir dize olan windowFeatures içindir. Bu özellik yalnızca bir kullanıcı hareketiyle çalışır. Bu nedenle, bir düğmeyi tek tıklamayla etkinleştirebilirsiniz.

Diğer ekranlarda tam ekran pop-up pencereleri açma

Bu özellik, kullanıcının bilgisayarına bağladığı tüm ekranlar hakkında bilgi edinmenizi sağlayan Window Management API ile birlikte kullanıldığında gerçekten çok kullanışlı olur. Örneğin, kullanıcının mevcut ekranından farklı bir ekranda tam ekran pop-up pencere açmak için önce diğer ekranı bulmanız, ardından availLeft, availTop, availWidth ve availHeight değerlerini windowFeatures dizesinin ilgili left, top, width ve height değerlerine iletmeniz gerekir.


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

Demo'da tam ekran pop-up pencereleri deneyin ve kaynak kodu görüntüleyin. Tam ekran onay kutusunu ve Tam ekran pop-up düğmesini işaretlediğinizden emin olun. Mümkünse cihazınıza birden fazla ekran bağlayarak denemeyi oynayın.

Teşekkür ederiz

Bu makale Brad Triebwasser, Hakan Isbiliroglu, Mike Wasserman ve Rachel Andrew tarafından incelendi.