وظيفة clipboardiTem.supports () أصبحت الآن أساسية متوفرة حديثا | بلوق | web.dev

وظيفة clipboardiTem.supports () أصبحت الآن أساسية متوفرة حديثًا

ابق منظمًا مع المجموعات

احفظ وتصنيف المحتوى بناءً على تفضيلاتك.

تم النشر: 30 أبريل 2025

الاحتفال: ميزة الويب هذه متوفرة الآن في جميع محركات المتصفح الرئيسية الثلاثة ، وتصبح خط الأساس متاحًا حديثًا اعتبارًا من 30 مارس 2025.

جعلت واجهة برمجة تطبيقات الحافظة Async العمل مع الحافظة أسهل بكثير مما كانت عليه في الماضي. بدلاً من الطرق السابقة لإدارة الحافظة ، يمكنك الآن الاتصال navigator.clipboard.writeText() لمحتوى النص العادي أو navigator.clipboard.write() بالنسبة إلى “تقريبًا” كل شيء آخر مثل الصور أو المحتوى النصي أو HTML.

قطعة واحدة مفقودة حتى الآن ، على الرغم من ذلك ، كانت قياس “تقريبا”. على سبيل المثال ، لا يمكنك معرفة ما إذا كانت واجهة برمجة تطبيقات تدعم SVG حتى حاولت ، وبعد ذلك ، في حالة عدم الدعم ، استثناء تم إلقاؤه. لم تكن هذه طريقة مريحة للغاية لتحديد الدعم ، ولهذا السبب الثابت ClipboardItem.supports() تم تحديد الوظيفة.

لقد وصلت الوظيفة الآن إلى خط الأساس المتاح حديثًا ، مما يعني أن العمل مع الحافظة يصبح أفضل. لمعرفة ما إذا كان المتصفح يدعم تنسيقًا معينًا ، فالمرض نوع MIME للتنسيق الذي تهتم به إلى الوظيفة.

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."

من قبل ، كتبت “تقريبا” كل شئ وإلا ، وهذا هو المكان الذي يصبح مثيرًا للاهتمام حقًا. تتيح لك التنسيقات المخصصة على شبكة الإنترنت العمل مع التنسيقات التي لا يدعمها المستعرض أصلاً. على سبيل المثال ، افتراضيًا ، لا يدعم المتصفح صور 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."

ولكن باستخدام تنسيقات الويب المخصصة على الويب ، يمكنك العمل مع صور AVIF ونسخها ولصقها بحرية ، طالما أن الطرف المستلم يعرف أيضًا كيفية التعامل مع تنسيق الويب المخصص.

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."

شكرا ل ClipboardItem.supports() الوظيفة ، يمكنك الآن اكتشاف موقف دعم الحافظة بشكل صحيح لتنسيق الويب المخصص على شبكة الإنترنت أيضًا وتأكد من أنه يعمل.

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);
  }
}

مع ClipboardItem.supports() وظيفة الآن خط الأساس متاح حديثًا ، يمكن لمطوري الويب اكتشاف دعم الحافظة بشكل موثوق لأنواع MIME المختلفة ، بما في ذلك تنسيقات الويب المخصصة. يجعل هذا التحسين العمل مع الحافظة أكثر قوة ويمكن التنبؤ به ، مما يؤدي إلى تحسين تجربة المستخدم عبر جميع المتصفحات.