Ngày phát hành: 30 tháng 4 năm 2025
Celebration: Tính năng web này hiện có trong cả 3 công cụ trình duyệt chính và sẽ trở thành tính năng mới có trong Baseline kể từ ngày 30 tháng 3 năm 2025.
Async Clipboard API giúp việc thao tác với bảng nhớ tạm trở nên dễ dàng hơn nhiều so với trước đây. Thay vì các phương thức quản lý bảng nhớ tạm trước đây, giờ đây, bạn có thể gọi navigator.clipboard.writeText() cho nội dung văn bản thuần tuý hoặc navigator.clipboard.write() cho "hầu hết" mọi nội dung khác như hình ảnh, nội dung văn bản hoặc HTML.
Tuy nhiên, một phần còn thiếu cho đến nay là việc định lượng "gần như". Ví dụ: bạn không thể biết liệu API có hỗ trợ SVG hay không cho đến khi thử, sau đó, trong trường hợp không hỗ trợ, bạn sẽ phát hiện được trường hợp ngoại lệ được gửi. Đây không phải là cách rất phù hợp để xác định khả năng hỗ trợ, đó là lý do hàm ClipboardItem.supports() tĩnh được chỉ định.
Hàm này hiện đã đạt trạng thái Baseline Newly available (Có sẵn trong Baseline), nghĩa là hoạt động với bảng nhớ tạm sẽ trở nên hiệu quả hơn nữa. Để biết trình duyệt có hỗ trợ một định dạng nhất định hay không, hãy truyền loại MIME của định dạng bạn quan tâm vào hàm.
const format = 'image/svg+xml';
const supportsFormat = ClipboardItem.supports(format);
console.log(`This browser does${supportsFormat ? '' : ' not'} support ${format}.`);
// "This browser does support image/svg+xml."
Trước đây, tôi đã viết "gần như" mọi thứ khác, và đây là phần thú vị nhất. Định dạng tuỳ chỉnh trên web cho phép bạn xử lý các định dạng mà trình duyệt không hỗ trợ. Ví dụ: theo mặc định, trình duyệt không hỗ trợ hình ảnh AVIF.
const format = 'image/avif';
const supportsFormat = ClipboardItem.supports(format);
console.log(`This browser does${supportsFormat ? '' : ' not'} support ${format}.`);
// "This browser does not support image/avif."
Tuy nhiên, bằng cách sử dụng định dạng tuỳ chỉnh trên web, bạn có thể làm việc với hình ảnh AVIF và sao chép cũng như dán hình ảnh đó một cách tự do, miễn là bên nhận cũng biết cách xử lý định dạng tuỳ chỉnh trên web.
const format = 'web image/avif';
const supportsFormat = ClipboardItem.supports(format);
console.log(`This browser does${supportsFormat ? '' : ' not'} support ${format}.`);
// "This browser does support web image/avif."
Nhờ hàm ClipboardItem.supports(), giờ đây, bạn cũng có thể phát hiện chính xác tình huống hỗ trợ bảng nhớ tạm cho định dạng tuỳ chỉnh trên web và đảm bảo định dạng đó hoạt động.
if (ClipboardItem.supports('web image/avif')) {
// Fetch remote AVIF image and obtain its blob representation.
const blob = await fetch('image.avif').then((response) => response.blob());
try {
// Write the image data to the clipboard, prepending the blob's actual
// type (`"image/avif"` with the string `"web "`, so it becomes
// `"web image/avif"`.
const clipboardItem = new ClipboardItem({
'web image/avif': blob,
});
await navigator.clipboard.write([clipboardItem]);
} catch (err) {
console.error(err.name, err.message);
}
}
Với hàm ClipboardItem.supports() hiện có sẵn trong Baseline New, nhà phát triển web có thể phát hiện một cách đáng tin cậy tính năng hỗ trợ bảng nhớ tạm cho nhiều loại MIME, bao gồm cả định dạng tuỳ chỉnh trên web. Tính năng nâng cao này giúp hoạt động với bảng nhớ tạm trở nên mạnh mẽ và dễ dự đoán hơn, cải thiện trải nghiệm người dùng trên tất cả trình duyệt.