Định dạng tuỳ chỉnh trên web dành cho API Bảng nhớ tạm không đồng bộ

Thomas Steiner

Cho đến nay, API Bảng nhớ tạm không đồng bộ đã hỗ trợ một tập hợp Các loại MIME sẽ được sao chép vào 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 dữ liệu được nhúng, chẳng hạn như Các phần tử script hoặc đường liên kết javascript: từ một chuỗi HTML hoặc để ngăn chặn PNG tấn công bằng bom giải nén.

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:

• Các trường hợp trong đó ứng dụng tự xử lý hoạt động dọn dẹp.
• Các trường hợp quan trọng là dữ liệu được sao chép phải giống với dữ liệu đã dán.

Đối với những trường hợp như vậy, Async Clipboard API 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

API Bảng nhớ tạm không đồng bộ mỗi phiên bản có hỗ trợ hình ảnh được hỗ trợ kể từ Chromium 76. Các định dạng tuỳ chỉnh trên web cho Async Clipboard API được hỗ trợ trên máy tính và trên Chromium dành cho thiết bị di động kể từ phiên bản 104.

Ghi định dạng tuỳ chỉnh trên web vào bảng nhớ tạm

Việc ghi định dạng tuỳ chỉnh trên web vào bảng nhớ tạm gần giống với việc ghi định dạng đã dọn dẹp, ngoại trừ yêu cầu phải thêm chuỗi "web " (bao gồm cả dấu cách ở 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ư với việc viết, việc đọc các định dạng tùy chỉnh trên web từ bảng nhớ tạm gần giống với đọc các định dạng hợp lý. Điểm khác biệt duy nhất là ứng dụng hiện 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 của web (như web image/jpeg) không phải là định dạng dành riêng cho từng nền tảng thông thường các ứng dụng sẽ hiểu (vì họ mong đợi image/jpeg). Theo thời gian, các ứng dụng có liên quan sẽ dự kiến sẽ thêm hỗ trợ cho các định dạng như vậy, chẳng hạn như chọn tham gia nếu các nhà phát triển của họ cho rằng có hỗ trợ cho web sao cho 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, các định dạng hiện có ở nhiều định dạng sẵn sàng để sử dụng, như có thể thấy trong ảnh chụp màn hình cho macOS bên dưới.

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 hoạt động của bản minh hoạ.

Xác nhận

Bài viết này do Joe Medley đánh giá và François Beaufort. Hình ảnh chính của Neon Tommy, được sử dụng theo Giấy phép CC BY-SA 2.0.