Window Management API ile birkaç ekranı yönetme

Bağlı ekranlar hakkında bilgi edinin ve pencereleri bu ekranlara göre konumlandırın.

Thomas Steiner

Pencere Yönetim API'si

Window Management API, makinenize bağlı ekranları sıralamanıza olanak tanır. ve pencereleri belirli ekranlara yerleştirmek için kullanılan bir teknoloji.

Önerilen kullanım alanları

Bu API'yi kullanabilecek sitelere örnek olarak şunlar verilebilir:

• Çok pencereli grafik düzenleyiciler Gimp, çeşitli düzenleme araçlarını doğru şekilde konumlandırılmış pencerelerde bulabilirsiniz.
• Sanal işlem masaları, pazar eğilimlerini herhangi bir pencerede görüntülenebilen birden çok pencerede gösterebilir. tam ekran moduna geçer.
• Slayt gösterisi uygulamaları, konuşmacı notlarını dahili birincil ekranda ve sunuyu harici projektör.

Window Management API'yi kullanma

Sorun

Pencereleri kontrol etmek için zamana meydan okuyan yaklaşım, Maalesef Window.open() fark etmiyor. Bu API'nin, API'nin temel özellikleri, windowFeatures DOMString parametresine rağmen yıllar boyunca bize iyi hizmet etti. Bir pencerenin position, geçerli olduğu gibi koordinatları left ve top (veya sırasıyla screenX ve screenY) biçiminde olmalı ve size göre width ve height (veya sırasıyla innerWidth ve innerHeight). Örneğin, 400×300 pencereye göre soldan 50 piksel ve üstten 50 piksel şunu kullanabilir:

const popup = window.open(
  'https://example.com/',
  'My Popup',
  'left=50,top=50,width=400,height=300',
);

window.screen özelliğini kullanarak Screen nesnesi döndürür. Bu, çıkış:

window.screen;
/* Output from my MacBook Pro 13″:
  availHeight: 969
  availLeft: 0
  availTop: 25
  availWidth: 1680
  colorDepth: 30
  height: 1050
  isExtended: true
  onchange: null
  orientation: ScreenOrientation {angle: 0, type: "landscape-primary", onchange: null}
  pixelDepth: 30
  width: 1680
*/

Teknoloji alanında çalışan çoğu kişi gibi ben de yeni iş gerçekliğine uyum sağlamak zorunda kaldım ve kendimi evden çalışmaya başladınız. Benimki aşağıdaki fotoğrafta görünüyor (ilgileniyorsanız kurulumumla ilgili tüm ayrıntıları aşağıda bulabilirsiniz. MacBook'umun yanındaki iPad, dizüstü bilgisayara Sidecar. Böylece ihtiyacım olan her seferinde ikinci bir ekrana geliyor.

Büyük ekrandan yararlanmak istersem, pop-up'ı kod örneğini ikinci ekrana yükleyin. Yapıyorum aşağıdaki gibidir:

popup.moveTo(2500, 50);

İkinci ekranın boyutlarını bilmek mümkün olmadığından, bu kaba bir tahmindir. Bilgi window.screen yalnızca yerleşik ekranı kaplar, iPad ekranını kapsamaz. Bildirilen width 1680 piksel olduğu için 2500 piksele taşımak MacBook'umun sağ tarafında olduğunu bildiğim için iPad'e bırakıyorum. Nasıl? Bunu genel durumda yapabilir miyim? Anlaşılan, tahmin etmekten daha iyi bir yol var. Bu şekilde ekip Window Management API'yi tıklayın.

Özellik algılama

Window Management API'nin desteklenip desteklenmediğini kontrol etmek için şunu kullanın:

if ('getScreenDetails' in window) {
  // The Window Management API is supported.
}

window-management izni

Window Management API'yi kullanabilmek için kullanıcıdan izin istemem gerekiyor. window-management izni Aşağıdakine benzer Permissions API:

let granted = false;
try {
  const { state } = await navigator.permissions.query({ name: 'window-management' });
  granted = state === 'granted';
} catch {
  // Nothing.
}

Eski ve yeni izin adına sahip tarayıcılar kullanılırken, izin isterken aşağıdaki örnekte olduğu gibi savunma kodu kullandığınızdan emin olun.

async function getWindowManagementPermissionState() {
  let state;
  // The new permission name.
  try {
    ({ state } = await navigator.permissions.query({
      name: "window-management",
    }));
  } catch (err) {
    return `${err.name}: ${err.message}`;
  }
  return state;
}

document.querySelector("button").addEventListener("click", async () => {
  const state = await getWindowManagementPermissionState();
  document.querySelector("pre").textContent = state;
});

Tarayıcı can yeni API'yi kullanıyor. Daha fazla bilgi edinmek için okumaya devam edin.

window.screen.isExtended mülkü

Cihazıma birden fazla ekran bağlı olup olmadığını öğrenmek için window.screen.isExtended mülk. true veya false değerini döndürür. Kurulumumda true değerini döndürüyor.

window.screen.isExtended;
// Returns `true` or `false`.

getScreenDetails() yöntemi

Mevcut kurulumun birden çok ekranlı olduğunu öğrendiğime göre Window.getScreenDetails() kullanarak ikinci ekran yapabilirsiniz. Bu işlev çağrıldığında, şu koşulları karşılayan bir izin istemi gösterilir: sitenin ekranıma pencereler açıp yerleştiremeyeceğini sorar. İşlev, bir vaat döndürür. bir ScreenDetailed nesnesiyle çözülür. Bağlı bir iPad ile MacBook Pro 13 cihazımda Bu, iki ScreenDetailed nesnesi içeren bir screens alanı içerir:

await window.getScreenDetails();
/* Output from my MacBook Pro 13″ with the iPad attached:
{
  currentScreen: ScreenDetailed {left: 0, top: 0, isPrimary: true, isInternal: true, devicePixelRatio: 2, …}
  oncurrentscreenchange: null
  onscreenschange: null
  screens: [{
    // The MacBook Pro
    availHeight: 969
    availLeft: 0
    availTop: 25
    availWidth: 1680
    colorDepth: 30
    devicePixelRatio: 2
    height: 1050
    isExtended: true
    isInternal: true
    isPrimary: true
    label: "Built-in Retina Display"
    left: 0
    onchange: null
    orientation: ScreenOrientation {angle: 0, type: "landscape-primary", onchange: null}
    pixelDepth: 30
    top: 0
    width: 1680
  },
  {
    // The iPad
    availHeight: 999
    availLeft: 1680
    availTop: 25
    availWidth: 1366
    colorDepth: 24
    devicePixelRatio: 2
    height: 1024
    isExtended: true
    isInternal: false
    isPrimary: false
    label: "Sidecar Display (AirPlay)"
    left: 1680
    onchange: null
    orientation: ScreenOrientation {angle: 0, type: "landscape-primary", onchange: null}
    pixelDepth: 24
    top: 0
    width: 1366
  }]
}
*/

Bağlı ekranlarla ilgili bilgiler screens dizisinde bulunabilir. Ayrıca, iPad için left başlangıç fiyatı: 1680, bu değer yerleşik ekranın tam olarak width olanıdır. Bu ekranların mantıksal olarak tam olarak nasıl düzenleneceğini belirlememi sağlıyor (ekranların üzerinde vb.) sorun. Artık her ekran için, ekranın isInternal olup olmadığını gösterecek veriler de var ve isPrimary olup olmadığını gösterir. Yerleşik ekranın birincil ekran olması gerekmez.

currentScreen alanı, geçerli window.screen öğesine karşılık gelen canlı bir nesnedir. Nesne Ekranlar arası pencere yerleşimlerinde veya cihaz değişikliklerinde güncellenir.

screenschange etkinliği

Şu anda eksik olan tek şey ekran kurulumumun ne zaman değiştiğini algılamanın bir yolu. Yeni bir etkinlik, screenschange, tam olarak bunu yapar: Ekran takımyıldızı her değiştirildiğinde etkinleşir. (Bildirim "ekranlar" etkinlik adında çoğul olduğundan emin olun.) Yani etkinlik, yeni bir ekran veya (Yardımcı öğelerde fiziksel veya sanal olarak) cihazın takılı ya da çıkarılmış olması gerekir.

Yeni ekran ayrıntılarını eşzamansız olarak (screenschange etkinliği) aramanız gerektiğini unutmayın. bu verileri sağlamaz. Ekran ayrıntılarını aramak için önbelleğe alınan canlı nesneyi kullanın Screens arayüzü.

const screenDetails = await window.getScreenDetails();
let cachedScreensLength = screenDetails.screens.length;
screenDetails.addEventListener('screenschange', (event) => {
  if (screenDetails.screens.length !== cachedScreensLength) {
    console.log(
      `The screen count changed from ${cachedScreensLength} to ${screenDetails.screens.length}`,
    );
    cachedScreensLength = screenDetails.screens.length;
  }
});

currentscreenchange etkinliği

Yalnızca mevcut ekrandaki değişikliklerle (yani canlı nesnenin değeri) ilgileniyorsam currentScreen), currentscreenchange etkinliğini dinleyebilirim.

const screenDetails = await window.getScreenDetails();
screenDetails.addEventListener('currentscreenchange', async (event) => {
  const details = screenDetails.currentScreen;
  console.log('The current screen has changed.', event, details);
});

change etkinliği

Son olarak, sadece somut bir ekrandaki değişikliklerle ilgileniyorsam, o ekranın görsellerini dinleyebilirim. change etkinliği.

const firstScreen = (await window.getScreenDetails())[0];
firstScreen.addEventListener('change', async (event) => {
  console.log('The first screen has changed.', event, firstScreen);
});

Yeni tam ekran seçenekleri

Şimdiye kadar, öğelerin tam ekran modunda gösterilmesi için uygun şekilde adlandırılmış requestFullScreen() yöntemidir. Yöntem, şu değeri iletebileceğiniz bir options parametresi alır: FullscreenOptions Geldiğimiz noktada tek özelliği navigationUI. Window Management API, aşağıdakileri belirlemenize olanak tanıyan yeni bir screen özelliği ekler: tam ekran görünümünün başlatılacağı ekran. Örneğin, birincil ekranı ayarlamak istiyorsanız tam ekran:

try {
  const primaryScreen = (await getScreenDetails()).screens.filter((screen) => screen.isPrimary)[0];
  await document.body.requestFullscreen({ screen: primaryScreen });
} catch (err) {
  console.error(err.name, err.message);
}

Çoklu Dolgu

Window Management API'yi çoklu doldurmak mümkün değildir, ancak şeklini bu şekilde değiştirebilirsiniz özel olarak yeni API'ye göre kodlayabilirsiniz:

if (!('getScreenDetails' in window)) {
  // Returning a one-element array with the current screen,
  // noting that there might be more.
  window.getScreenDetails = async () => [window.screen];
  // Set to `false`, noting that this might be a lie.
  window.screen.isExtended = false;
}

API'nın diğer yönleri, yani çeşitli ekran değiştirme etkinlikleri ve screen emin olun. Bu durumda, FullscreenOptions hiçbir zaman tetiklenmez veya desteklenmeyen tarayıcılarda kullanabilirsiniz.

Demo

Siz de benim gibi biriyseniz, Çevik yaklaşımın gelişimini kripto para birimleri var. (Aslında bu gezegeni sevdiğim için sevmiyorum ama Bu makalede örnek olarak, did.) Sahip olduğum kripto para birimlerini takip edebilmek için mesela yatağımın rahatlığıyla, tereddüt etmeden ve her zaman olduğu gibi tek ekran kurulumu.

Kripto parayla ilgili bir konu olduğundan piyasalar her an tedirgin olabilir. Böyle bir durumda, birden çok ekranlı kurulumum olduğu masama geçiyorum. Herhangi bir para biriminin penceresini tıklayıp tüm ayrıntıları karşıt ekranda tam ekran görünümünde hızlıca görebilirsiniz. Aşağıda yeni bir fotoğraf bulabilirsiniz. fotoğraf çektim. Beni yakaladı tesadüfen ellerimi yüzüme koyduğumda.

Aşağıya yerleştirilmiş demoyu deneyebilir veya arızadaki kaynak kodunu görebilirsiniz.

Güvenlik ve izinler

Chrome ekibi, Window Management API'yi temel alan ve Güçlü Web Platformu Özelliklerine Erişimi Kontrol Etme'de açıklanan ilkeleri, dahil olmak üzere tüm bunları kapsar. Window Management API, kullanıcıların bir cihaza bağlı ekranlarla ilgili yeni bilgiler sağlar. Bu da, cihazların dijital parmak izi kullanıcılarının, özellikle de sürekli olarak cihazlarına bağlı birden fazla ekranlıların Tek Bu gizlilik endişesini ortadan kaldırmak için, maruz kalan ekran özellikleri gereken minimum sayı ile sınırlıdır. örnek olarak verilebilir. Sitelerin birden çok ekrana uygun hale gelmesi için kullanıcı izni gerekir diğer ekranlara pencereler yerleştirebilirsiniz. Chromium ayrıntılı ekran etiketleri döndürse de, tarayıcılar daha az açıklayıcı (veya boş etiketler bile) döndürebilir.

Kullanıcı denetimi

Kullanıcı, kurulumunun nasıl gösterildiğiyle ilgili tam kontrole sahiptir. Belgenin, yapabilir ve site bilgileri özelliğini kullanarak daha önce verilmiş bir izni iptal edebilir tarayıcı.

Kurumsal kontrol

Chrome Enterprise kullanıcıları, Window Management API'nin çeşitli özelliklerini bu belgenin ilgili bölümünde Atomik Politika Grupları Ayarlar'da devre dışı bırakabilirsiniz.

Şeffaflık

Window Management API'yi kullanma izninin verilip verilmediğini Tarayıcının site bilgilerinde gösterilir ve Permissions API aracılığıyla da sorgulanabilir.

İzin kalıcılığı

Tarayıcı, izin vermeyi sürdürür. Bu izin, tarayıcının sitesi üzerinden iptal edilebilir. ekleyebilirsiniz.

Geri bildirim

Chrome ekibi, Window Management API ile ilgili deneyimlerinizi öğrenmek istiyor.

Bize API tasarımı hakkında bilgi verin

API'de beklediğiniz gibi çalışmayan bir şeyler mi var? Veya eksik yöntemler mi var? gereken özellikler veya özellikler neler olabilir? Menkul kıymetle ilgili bir sorunuz veya yorumunuz varsa modeli nedir?

• İlgili GitHub deposunda bir spesifikasyon sorunu bildirin veya düşüncelerinizi mevcut bir depoya ekleyin .

Uygulamayla ilgili bir sorunu bildirin

Chrome'un uygulanmasıyla ilgili bir hata buldunuz mu? Yoksa uygulama, spesifikasyondan farklı mı?

• new.crbug.com adresinden hata bildiriminde bulunun. Açıklamalarda mümkün olduğunca Blink>Screen>MultiScreen yeniden oluşturmak için Bileşenler kutusunu işaretleyin. Glitch, hızlı ve kolay yeniden oluşturmalar paylaşmak için idealdir.

API'ye desteğinizi gösterin

Window Management API'yi kullanmayı planlıyor musunuz? Herkese açık desteğiniz Chrome'un ekibinin özelliklerini önceliklendirmek ve diğer tarayıcı tedarikçilerine bunları desteklemenin ne kadar kritik olduğunu göstermek için kullanılır.

• Bu özelliği nasıl kullanmayı planladığınızı WICG Discourse ileti dizisinde paylaşın.
• Hashtag'i kullanarak @ChromiumDev hesabına tweet gönderin #WindowManagement ve bize nerede ve nasıl kullandığınızı bildirin.
• Diğer tarayıcı tedarikçilerinden API'yi uygulamalarını isteyin.

Faydalı bağlantılar

• Spesifikasyon taslağı
• Herkese açık açıklayıcı
• Window Management API demosu | Window Management API demosu kaynak
• Chromium izleme hatası
• ChromeStatus.com girişi
• Blink Bileşeni: Blink>Screen>MultiScreen
• TAG İncelemesi
• Deneme Amacı

Teşekkür

Window Management API özelliği şu kullanıcı tarafından düzenlendi: Victor Costan, Joshua Bell ve Mike Wasserman. API'yi uygulayan Mike Wasserman ve Adrienne Gezgin Bu makale tarafından incelendi Joe Medley, François Beaufort, ve Kayce Basques. Fotoğraflar için Laura Torrent Puig'e teşekkür ederiz.