تنسيقات الويب المخصّصة لواجهة Async Clipboard API

Thomas Steiner

حتى الآن، كانت Async Clipboard API متاحة لمجموعة محدودة من أنواع MIME التي سيتم نسخها ولصقها من حافظة النظام، على وجه التحديد: text/plain text/html، وimage/png. يصحح المتصفح عادةً هذا الإجراء لإزالة المحتوى عناصر script أو روابط javascript: من سلسلة HTML، أو لمنع PNG الهجمات باستخدام قنابل إلغاء الضغط.

ومع ذلك، في بعض الحالات، قد يكون من المستحسن تضمين المحتوى الذي لم يتم تصحيحه في الحافظة:

• الحالات التي يتعامل فيها التطبيق مع عملية التعقيم نفسه
• الحالات التي يكون فيها من الضروري أن تكون البيانات المنسوخة مطابقة للبيانات التي يتم لصقها

في مثل هذه الحالات، أصبحت Async Clipboard API متوافقة الآن مع تنسيقات الويب المخصّصة التي تتيح للمطوّرين كتابة. بيانات عشوائية إلى الحافظة.

دعم المتصفح

أصبحت واجهة برمجة التطبيقات Async Clipboard API في حد ذاتها متوافقة مع الصور اعتبارًا من الإصدار Chromium 76. مخصّص على الويب تكون التنسيقات الخاصة بواجهة برمجة التطبيقات Async Clipboard API متاحة على أجهزة الكمبيوتر المكتبي وأجهزة Chromium للأجهزة الجوّالة، وذلك اعتبارًا من الإصدار 104.

كتابة تنسيقات مخصصة للويب في الحافظة

تكاد كتابة تنسيقات مخصصة على الويب إلى الحافظة مع كتابة تنسيقات مصحّحة، باستثناء المتطلبات لإضافة السلسلة "web " (بما في ذلك المسافة اللاحقة) إلى نوع MIME لملف الكائن الثنائي الكبير (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);
}

قراءة التنسيقات المخصّصة للويب من الحافظة

كما هو الحال مع الكتابة، تكاد تكون قراءة تنسيقات الويب المخصصة من الحافظة مماثلة تقريبًا قراءة تنسيقات مضبوطة الاختلاف الوحيد هو أن يحتاج التطبيق الآن إلى البحث عن عناصر الحافظة التي يبدأ نوعها بـ "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);
}

إمكانية التشغيل التفاعلي مع التطبيقات الخاصة بالنظام الأساسي

إنّ التنسيقات المخصّصة للويب، مثل web image/jpeg، ليست مفهومة للتطبيقات المعتادة المخصّصة للمنصة (لأنّها تتوقّع استخدام image/jpeg). وبمرور الوقت، من المتوقّع أن تضيف التطبيقات المعنية ميزة استخدام هذه التنسيقات كميزة اختيارية إذا رأى المطوّرون أنّ استخدام التنسيقات المخصّصة للويب مناسب للمستخدمين. في حافظة نظام التشغيل، تتوفّر التنسيقات المختلفة بتنسيقات متعددة جاهزة للاستخدام، كما هو موضّح في لقطة الشاشة لنظام التشغيل macOS أدناه.

عرض توضيحي

يمكنك تجربة العرض التوضيحي أدناه يمكنك عرض رمز المصدر للتعرّف على طريقة عمل العرض التوضيحي.

شكر وتقدير

تمت مراجعة هذه المقالة من قِبل جو ميدلي. وفرانسوا بوفورت صورة رئيسية من تصميم نيون تومي، مستخدمة ضمن ترخيص CC BY-SA 2.0