Cho đến nay, API Bảng nhớ tạm không đồng bộ đã hỗ trợ một tập hợp giới hạn các loại MIME mà bạn muốn sao chép và dán từ bảng nhớ tạm của hệ thống, cụ thể là: text/plain, text/html và image/png. Trình duyệt thường dọn dẹp bộ lọc này, chẳng hạn như để xoá các phần tử script nhúng hay đường liên kết javascript: khỏi một chuỗi HTML, hoặc để ngăn chặn các cuộc tấn công bom giải nén PNG.
Tuy nhiên, trong một số trường hợp, bạn nên hỗ trợ nội dung chưa được dọn dẹp trên bảng nhớ tạm:
- Những trường hợp ứng dụng tự dọn dẹp.
- Những trường hợp quan trọng là dữ liệu được sao chép phải giống hệt với dữ liệu được dán.
Đối với những trường hợp như vậy, API Bảng nhớ tạm Async hiện hỗ trợ các định dạng tuỳ chỉnh trên web, cho phép nhà phát triển ghi dữ liệu tuỳ ý vào bảng nhớ tạm.
Hỗ trợ trình duyệt
Kể từ Chromium 76, API Bảng nhớ tạm không đồng bộ có hỗ trợ hình ảnh. Kể từ phiên bản 104, các định dạng tuỳ chỉnh trên web cho API Bảng nhớ tạm không đồng bộ được hỗ trợ trên Chromium cho máy tính và thiết bị di động.
Ghi các định dạng tuỳ chỉnh dành cho web vào bảng nhớ tạm
Việc ghi các định dạng tuỳ chỉnh dành cho web vào bảng nhớ tạm cũng gần giống với việc viết định dạng được dọn dẹp, ngoại trừ yêu cầu thêm chuỗi "web " (bao gồm cả khoảng trắng ở cuối) vào loại MIME của blob.
// Fetch remote JPEG and GIF images and obtain their blob representations.
const [jpegBlob, gifBlob] = await Promise.all([
fetch('image.jpg').then((response) => response.blob()),
fetch('image.gif').then((response) => response.blob()),
]);
try {
// Write the image data to the clipboard, prepending the blobs' actual
// types (`"image/jpeg"` and "image/gif") with the string `"web "`, so
// they become `"web image/jpeg"` and `"web image/gif"` respectively.
// The code elegantly makes use of computed property names:
// https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/Object_initializer#computed_property_names.
const clipboardItem = new ClipboardItem({
[`web ${jpegBlob.type}`]: jpegBlob,
[`web ${gifBlob.type}`]: gifBlob,
});
await navigator.clipboard.write([clipboardItem]);
} catch (err) {
console.error(err.name, err.message);
}
Đọc các định dạng tuỳ chỉnh trên web từ bảng nhớ tạm
Giống như khi viết, việc đọc các định dạng tuỳ chỉnh trên web từ bảng nhớ tạm gần giống với việc đọc các định dạng đã được dọn dẹp. Điểm khác biệt duy nhất là giờ đây, ứng dụng cần tìm các mục trong bảng nhớ tạm có loại bắt đầu bằng "web ".
try {
// Iterate over all clipboard items.
const clipboardItems = await navigator.clipboard.read();
for (const clipboardItem of clipboardItems) {
for (const type of clipboardItem.types) {
// Discard any types that are not web custom formats.
if (!type.startsWith('web ')) {
continue;
}
const blob = await clipboardItem.getType(type);
// Sanitize the blob if you need to, then process it in your app.
}
}
} catch (err) {
console.error(err.name, err.message);
}
Khả năng tương tác với các ứng dụng dành riêng cho nền tảng
Các định dạng tuỳ chỉnh trên web như web image/jpeg không phải là định dạng mà các ứng dụng dành riêng cho nền tảng thông thường hiểu được (vì họ mong đợi image/jpeg). Theo thời gian, các ứng dụng có liên quan dự kiến sẽ thêm tính năng hỗ trợ cho các định dạng đó dưới dạng lựa chọn sử dụng nếu nhà phát triển cho rằng việc hỗ trợ các định dạng tuỳ chỉnh trên web là phù hợp với người dùng của họ. Trên bảng nhớ tạm của hệ điều hành, nhiều định dạng có sẵn ở nhiều định dạng sẵn sàng để sử dụng, như bạn có thể thấy trong ảnh chụp màn hình cho macOS dưới đây.
Bản minh hoạ
Bạn có thể thử bản minh hoạ bên dưới và xem mã nguồn để biết cách bản minh hoạ hoạt động.
Xác nhận
Bài viết này đã được Joe Medley và François Beaufort xem xét. Hình ảnh chính của Neon Tommy, được sử dụng theo giấy phép CC BY-SA 2.0.