Pano erişimi: eşzamanlı ve eşzamansız

[turuncukafalikiz]

1. 
   
   Pano erişimi: eşzamanlı ve eşzamansız
   

Sistem panosuyla çalışmak için, “Pano API’si ve olayları” W3C spesifikasyonu iki API sağlar: senkronize “Pano Olay API’sı” ve senkronize olmayan “Eşzamansız Pano API’si”.


Bir web uygulamasındaki panoya programlı erişim, son yıllarda bir dönüşüm geçirdi. Sadece birkaç yıl önce, altında Flash gerektiren ZeroClipboard gibi kitaplıklar popülerdi. Ancak Flash’ın ölümüyle birlikte bu kitaplıklar da önemini yitirdi. Öte yandan, kopyala veya yapıştır gibi komutları programlı olarak yürütmek için kullanılabilen, birlikte çalışabilirlik sorunlarından muzdarip olan execCommand API, artık eskimiş kabul ediliyor ve büyük olasılıkla “Resmi Olmayan Taslak” durumunun ” ötesine geçmeyecek. Ayrıca, veriler yalnızca DOM’dan okunabilir ve yalnızca DOM’a yazılabilir:

// Achtung: veraltet!
// Kopieren
const source = document.querySelector("#source");
source.select();
document.execCommand("copy");

// Und Einfügen
const target = document.querySelector("#target");
target.focus();
document.execCommand("paste");


Bu nedenle, W3C’deki geliştirmenin odak noktası, şu anda çalışan bir taslak olarak mevcut olan “Pano API’si ve olaylar” spesifikasyonudur. Sistem panosuyla çalışmak için iki farklı API tanımlar: Pano Olayları API’si (veya Eşzamanlı Pano API’si) ve nispeten yeni Eşzamansız Pano API’si.

senkronize erişim


Bir yandan Pano Olayı API’si, genel pano işlemlerine, yani kesme, kopyalama ve yapıştırma sırasında tetiklenen olaylara tepki verme ve diğer yandan “takılma” yeteneği sunar. senkron panoya yazma ve okuma erişimi.

Birincisi için, API dört farklı olayı tanımlar:

• “kopyala”: Veriler panoya kopyalandığında tetiklenir.
• “yapıştır”: Panodan veri yapıştırıldığında tetiklenir.
• “kes”: Veri “kesildiğinde” tetiklenir ve ardından panoya kopyalanır.
• “clipboardchange”: Panonun içeriği değiştiğinde tetiklenir. Bu, tarayıcı dışında etkinleştirilen değişiklikler için de geçerlidir. Bu durumda, olay tam olarak tarayıcı yeniden odaklandığında tetiklenir.

Aşağıdaki listede gösterildiği gibi, uygun olay dinleyicilerini kullanarak bu olaylara tepki verebilirsiniz. the EventListener için copy-Event, web sitesinde bir kopyalama eylemi gerçekleştirildiğinde ne olması gerektiğini tanımlar. emlak hakkında clipboardData karşılık gelen olayın türünden bir nesneye ulaşırız. DataTransfer. Bir hatırlatma olarak, bu nesne, başlangıçta sürükle ve bırak API eylemlerinde veri iletmekten sorumlu olan bir nesneyi temsil eder. Yöntem hakkında setData() Aktarılacak veriler bu aktarım nesnesinde tanımlanabilir, burada verinin formatı (MIME türü biçiminde) yönteme birinci parametre olarak ve gerçek veriler ikinci parametre olarak iletilir. Karşı tarafta (ekleme işleminden sorumlu olan olay dinleyicisi içinde) yöntem aracılığıyla benzerdirler. getData() veri, MIME tipini belirterek aktarım nesnesinden okunur.

document.addEventListener('copy', (event) => {
const { clipboardData } = event;
clipboardData.setData(
'text/plain',
'Dieser Text kommt synchron in die Zwischenablage.'
);
event.preventDefault();
});
document.addEventListener('paste', (event) => {
const { clipboardData } = event;
const data = clipboardData.getData('text/plain');
console.log(data);
// => "Dieser Text kommt synchron in die Zwischenablage."
event.preventDefault();
});


Prensip olarak, bir transfer nesnesi farklı formatlar için veriler içerebilir. Bu şekilde veriler, tek bir kopyalama veya yapıştırma işlemiyle doğrudan birden fazla formatta aktarılabilir. Bu, örneğin, ekleme işleminin hedefine bağlı olarak verileri şu veya bu biçimde işlemek için kullanışlıdır. ekle Aşağıdaki liste, verilerin bu şekilde aynı anda düz metin, biçimlendirilmiş HTML metni ve JSON olarak nasıl aktarılabileceğini gösterir (veriler yalnızca bir karakter dizisi olarak aktarılabildiğinden, JSON söz konusu olduğunda buna göre serileştirilmesi gerekir (JSON.stringify()) ve seri durumdan çıkarılmış (JSON.parse()) istek).

document.addEventListener('copy', (event) => {
const { clipboardData } = event;
console.log(clipboardData);
clipboardData.setData(
'text/plain',
'Dieser Text kommt synchron in die Zwischenablage.'
);
clipboardData.setData(
'text/html',
'Dieser <strong>Text</strong> kommt synchron in die Zwischenablage.'
);
clipboardData.setData(
'application/json',
JSON.stringify({
message: 'Dieser Text kommt synchron in die Zwischenablage.'
}));
event.preventDefault();
});
document.addEventListener('paste', (event) => {
const { clipboardData } = event;
const data = clipboardData.getData('text/plain');
console.log(data);
// => "Dieser Text kommt synchron in die Zwischenablage."

const dataHTML = clipboardData.getData('text/html');
console.log(dataHTML);
// => "<meta charset='utf-8'>Dieser <strong>Text</strong>
// kommt synchron in die Zwischenablage."

const dataJSON = JSON.parse(clipboardData.getData('application/json'));
console.log(dataJSON);
// => { message: "Dieser Text kommt synchron in die Zwischenablage." }
event.preventDefault();
});

eşzamansız erişim


Kopyalama veya yapıştırma işlemi sırasında web uygulamasının yürütülmesi engellendiğinden, yukarıda açıklanan panoya senkronize erişim yalnızca yönetilebilir veri boyutları için uygundur. Öte yandan, görüntü verileri gibi daha karmaşık veya daha büyük verileri panoya kopyalamak veya panodan bir web uygulamasına yapıştırmak istiyorsanız, asenkron pano API’sini kullanmak tercih edilir. Adından da anlaşılacağı gibi, bu konudaki veriler eşzamansız ilgili işlemler tarayıcıyı engellemeden panoya yazılır ve panodan okunur. Ancak, eşzamansız pano API’sinin kullanılabilmesi için kullanıcıların ilgili web uygulamasının panoya erişmesine izin vermesi gerekir.

API’ye nesne aracılığıyla erişilebilir navigator.clipboardyazmak için eşdeğer yöntemlere sahip olan (write()) okumanın yanı sıra (read()) sağlar. Her iki yöntem de bir dönüş değeri sağlar PromisePromise API e üzerinden kolayca erişilebilmeleri için nesne async/await kullanalım.

Yöntemi yazarken write() bir dizi biçiminde kopyalanacak veriler ClipboardItem– Öğeleri geçirin. Her bir nesneye, anahtar/değer çiftleri olarak bir konfigürasyon nesnesi ile veri aktarılır; burada anahtar, biçimi temsil eder ve değer, verileri şu şekilde temsil eder: Blob içerir:

const copy = async () => {
try {
const data = [
new ClipboardItem(
{
'text/plain': new Blob(
['Dieser Text kommt asynchron in die Zwischenablage.'],
{ type: 'text/plain' }
)
}) ];
await navigator.clipboard.write(data);
} catch (error) {
console.error(error);
}
}

Okuma erişimi, yöntemle sağlanır read()içinden ilgili verileri bir dizi biçiminde geçirebilirsiniz. ClipboardItem-nesneler geldi. Özellikler types Her bir ClipboardItem-Object, nesneyle birlikte aktarılan çeşitli veri biçimlerini içerir:


const paste = async () => {
try {
const items = await navigator.clipboard.read();
for (const item of items) {
for (const type of item.types) {
const data = await item.getType(type);
const text = await data.text();
console.log(text);
}
}
} catch (error) {
console.error(error);
}
}

ile write() Ve read() şu anda metin ve resimler iletilebilir. Prensip olarak başka formatlar da düşünülebilir, örneğin ses veya video verileri için olanlar. Ancak bunlar, pano yoluyla aktarım açısından şu anda tüm tarayıcılar tarafından desteklenmemektedir.

Yanında gösterilen metinlerle çalışmak için write() Ve read() iki kolaylık yöntemi de değil writeText() Ve readText() mevcut, kodunuzu biraz daha kolaylaştırmak için kullanılabilir, çünkü onunla uğraşmak zorunda değilsiniz ClipboardItem– Ve Blob– nesneleri vurmalı:

const copyText = async () => {
try {
await navigator.clipboard.writeText(
"Dieser Text kommt asychron in die Zwischenablage."
);
} catch (error) {
console.error(error);
}
}
const pasteText = async () => {
try {
const text = await navigator.clipboard.readText();
console.log(text);
} catch (error) {
console.error(error);
}
}

Çözüm


Asenkron Pano API’si ile panoya erişim, eşzamansız bir iletişim kanalıyla genişletilir. Tüm “önemli” tarayıcılar, hem Eşzamanlı Pano API’si hem de Eşzamansız Pano API’si olmak üzere Pano API’si için destek sunar; bu nedenle, birincisi için destek eski tarayıcı sürümlerini de içerir. İlgili tarayıcıda en son eşzamansız sürümün bulunduğundan emin olmak istiyorsanız, navigator.clipboard– Nesneyi kontrol edin. Alternatif olarak, clipboard-polyfill gibi bir polyfill kitaplığını veya clipboard.js gibi popüler alternatifleri kullanabilirsiniz.


()



ana sayfaya