בממשק Clipboard
של ה-API של הלוח האסינכרוני יש גישת קריאה וכתיבה לתוכן של לוח המערכת. כך אפליקציית אינטרנט יכולה להטמיע תכונות של גזירה, העתקה והדבקה. אפשר להדביק נתונים מהלוח באפליקציה באמצעות קריאה ל-method read()
, ולהעתיק את הנתונים ללוח על ידי קריאה לשיטה write()
.
מלבד טקסט,
תמונות בפורמט Portable Network גיאוגרפי (PNG),
תכונה לזיהוי ב-SVG
מזהים תמיכה בתמונות SVG (וכל סוג MIME אחר) על ידי קריאה ל-method ClipboardItem.supports()
הסטטית, והעברת סוג ה-MIME הרצוי.
const supportsSVG = () => {
if (
!('supports' in window.ClipboardItem) ||
!window.ClipboardItem.supports('image/svg+xml')
) {
return false;
}
return true;
};
העתקה של תמונת SVG
מעתיקים קובץ אימג' בפורמט SVG על ידי אכלוס ה-ClipboardItem
באובייקט. ה-blob עם נתוני התמונה בפורמט SVG הוא הערך וסוג ה-blob (כלומר, 'image/svg+xml'
במקרה הזה) כמפתח שלו.
copyButton.addEventListener('click', async () => {
if (!supportsSVG()) {
return;
}
try {
const blob = await fetch(img.src).then((response) => response.blob());
await navigator.clipboard.write([
new window.ClipboardItem({
[blob.type]: blob,
}),
]);
} catch (err) {
console.error(err.name, err.message);
alert(err.message);
}
});
הדבקת תמונת SVG
כדי להדביק תמונת SVG, קוראים את השדה ClipboardItem
בחזרה מהלוח ומזינים את הסוג הרצוי (כלומר, 'image/svg+xml'
במקרה הזה) באמצעות ה-method getType()
. הפעולה הזו מחזירה blob, שאחרי ההמרה שלו לכתובת URL של blob, אפשר להקצות את המאפיין src
של <img>
.
pasteButton.addEventListener('click', async () => {
if (!supportsSVG()) {
return;
}
const [clipboardItem] = await navigator.clipboard.read();
const svgBlob = await clipboardItem.getType('image/svg+xml');
if (!svgBlob) {
alert('No SVG in the clipboard.');
return;
}
const image = document.createElement('img');
const blobURL = URL.createObjectURL(svgBlob);
image.addEventListener('load', () => {
URL.revokeObjectURL(blobURL);
});
image.src = blobURL;
});
חיטוי
SVG הוא פורמט חזק שמאפשר, לדוגמה, לסקריפטים מוטמעים. זה עלול להיות מסוכן כאשר המשתמש מדביק תוכן ממקורות לא ידועים, ולכן הדפדפן מבצע שלב ניקיון. כשמעתיקים נתונים, ה-API של הלוח האסינכרוני יוצר מסמך SVG בפורמט תקין ואז כותב אותו בלוח. כשמדביקים נתונים, מנתח המקטעים יוצר מקטע SVG שמעובד רק. לכן, לפני פעולת ההדבקה, מאפייני
המטפל באירועים של onclick
עדיין נמצאים, אבל לאחר ההדבקה הם מוסרים.
הדגמה (דמו)
אפשר לנסות להעתיק ולהדביק קובצי SVG ב-demo ב-Glitch. אפשר להציג את קוד המקור כדי לראות איך הוא עובד. הקפידו ללחוץ על אחד מהעיגולים לפני ואחרי ההעתקה וההדבקה. אחרי ההדבקה, מאפייני המטפלים באירועים של onclick
שעשויים להיות מסוכנים יוסרו.
קישורים רלוונטיים
- תוכנה בסביבת ייצור באמצעות התכונה הזו:
- רשומת ChromeStatus
- הכוונה למשלוח
- באג ב-Chromium
- מיקום ב-WebKit Standards
- מיקום בסטנדרטים של Mozilla
אישורים
צוות Microsoft Edge הטמיע תמיכה ב-SVG ב-Async Clipboard API ב-Chromium. הפוסט הזה נבדקה על ידי רייצ'ל אנדרו ואנופם ניגדה.