Bağlı ekranlar hakkında bilgi edinin ve pencereleri bu ekranlara göre konumlandırın.
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.
![İki sandalyeli okul masası. Okul tezgahının en üst tarafında, bir dizüstü bilgisayarı destekleyen ayakkabı kutuları ve etrafında iki iPad bulunuyor.](https://developer.chrome.google.cn/static/docs/capabilities/web-apis/window-management/image/school-bench-two-chairs-8465336393f71.jpg?authuser=8&hl=tr)
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.
![Yatağın sonunda, yazarın bacaklarının kısmen göründüğü devasa TV ekranı. Ekranda sahte bir kripto para birimi alım satım masası.](https://developer.chrome.google.cn/static/docs/capabilities/web-apis/window-management/image/massive-tv-screen-the-en-c57bfb0e325ff.jpg?authuser=8&hl=tr)
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.
![Ellerini paniklemiş yüzüne koymuş sahte kripto para birimi alım satım masasına bakan yazar.](https://developer.chrome.google.cn/static/docs/capabilities/web-apis/window-management/image/the-author-his-hands-hi-0d430520b074a.jpg?authuser=8&hl=tr)
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.