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. Şu ana kadar, tam ekran pop-up pencere açmak iki adımdan oluşuyordu:

  1. Ana uygulama penceresinden, Pop-up pencere aç düğmesini tıklama gibi bir kullanıcı hareketi gerektiren window.open() yöntemi çağrılır.
  2. Pop-up pencereden Element.requestFullscreen() yöntemi çağrılır. Bu yöntemde, Tam ekran moduna gir düğmesine yapılan tıklama gibi bir kullanıcı hareketi gerekir.

Chrome 119'da (karar tarihle) çalışan yeni bir kaynak denemesi kullanıma sunuldu: 31 Ekim 2023'ten Chrome 122'ye (kararlı tarih): 31 Ekim 2023'te pop-up pencereleri tam ekran modunda yalnızca tek adımda açmak için. Kaydolmak için Pop-up'ları tam ekran pencere olarak aç kaynak denemesi açılış sayfasında Kaydol'u tıklayın. Kaynak denemesinin yanı sıra, chrome://flags/#fullscreen-popup-windows işaretini Etkin değerine ayarlayarak yerel olarak da test edebilirsiniz.

Geçerli ekranda tam ekran pop-up pencereler açılıyor

Bu yeni özellik, window-management izni kapsamındadır. Kullanıcı izin verdikten sonra, aşağıdaki örnekte olduğu 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, pop-up pencerede açılacak url ilk parametredir. İkinci parametre, _blank özel değerine sahip target'tir. Üçüncü parametre windowFeatures içindir. Virgülle ayrılmış bir dizedir. Bu dizede bir pop-up pencere açmak için popup değeri, pop-up penceresini tam ekran modunda açmak içinse yeni fullscreen değeri kullanılır. Bu, yalnızca tek bir kullanıcı hareketiyle çalıştığından bir düğmenin tıklanmasıyla etkinleştirilebilir.

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

Bu özellik, kullanıcının bilgisayarına bağladığı tüm ekranlarla ilgili bilgi edinmenizi sağlayan Window Management API ile birlikte kullanıldığında öne çıkıyor. Örneğin, kullanıcının geçerli ekranından farklı bir ekranda tam ekran pop-up pencere açmak için önce diğer ekranı bulmanız ve ardından availLeft, availTop, availWidth ve availHeight değerlerini windowFeatures dizesinin karşılık gelen left, top, width ve height değerlerine aktarmanız 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`);
});

Demografi

Demoda tam ekran pop-up pencereleri deneyin ve kaynak kodunu görüntüleyin. Tam ekran onay kutusunu ve Tam ekran pop-up düğmesini işaretlediğinizden emin olun. Fırsatınız varsa cihazınıza bağlı birden çok ekranla demoyu oynayın.

Teşekkür

Bu makale Brad Triebwasser, Hakan İşbiliroğlu, Mike Wasserman ve Rachel Andrew tarafından incelendi.