تمت ترجمة هذه الصفحة بواسطة Cloud Translation API‏.

اختبار حدث clipboardchange، وهو طريقة أكثر فعالية لمراقبة الحافظة

Rohan Raja

Patrick Brosset

تاريخ النشر: 23 سبتمبر 2025

الحدث clipboardchange هو ميزة جديدة أضافها فريق Microsoft Edge إلى Chrome. يتيح لك ذلك تتبُّع التغييرات في الحافظة بكفاءة بدون التأثير سلبًا في الأداء.

يمكنك الآن اختبار حدث clipboardchange من خلال تجربة أصلية في كل من Chrome و Edge، بدءًا من الإصدار 140. نرحّب بأي ملاحظات قد تكون لديك أثناء اختبار هذه الميزة الجديدة، لأنّنا نأمل في النهاية أن تصبح ميزة موحّدة.

تحديات استطلاع الحافظة لرصد التغييرات

لمعرفة المحتوى المتوفّر في حافظة النظام، عليك استخدام طرق استقصاء غير فعّالة. على سبيل المثال، قد تريد تطبيقات الويب المخصّصة لتعديل النصوص تفعيل أزرار "لصق" مختلفة استنادًا إلى ما إذا كانت الحافظة تحتوي على نص أو صورة أو محتوى HTML.

يتطلّب الأسلوب الحالي لتحقيق ذلك استدعاء الطريقة navigator.clipboard.read() بشكل متكرّر للتحقّق من محتوى الحافظة، كما هو موضّح في مقتطف الرمز التالي:

// Inefficient polling approach
setInterval(async () => {
  try {
    const clipboardItems = await navigator.clipboard.read();
    updatePasteButtons(clipboardItems);
  } catch (err) {
    console.error('Failed to read clipboard:', err);
  }
}, 1000); // Poll every second

وعلى الرغم من أنّ هذه الطريقة فعّالة، إلا أنّها تتضمّن أيضًا بعض العيوب الكبيرة.

التأثير على الأداء

يؤدي الاستطلاع المستمر للحافظة إلى زيادة غير ضرورية في الحِمل. يتطلّب كل طلب إلى navigator.clipboard.read() الوصول إلى الحافظة على مستوى النظام، ما قد يؤثر سلبًا في أداء تطبيقك، خاصةً على الأجهزة ذات الموارد المحدودة. يصبح معدّل تكرار الاستطلاع عاملاً يحدّد المفاضلة بين سرعة الاستجابة والأداء.

استنزاف البطارية

على الأجهزة الجوّالة، يمكن أن يساهم الاستطلاع المتكرر للحافظة في استنزاف البطارية لأنّ التطبيق يصل باستمرار إلى موارد النظام حتى عندما لا ينسخ المستخدم المحتوى أو يلصقه بشكل نشط.

عدم اتساق تجربة المستخدم

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

المخاوف المتعلقة بالخصوصية بسبب الإفراط في الاستطلاع

يمكن أن يؤدي الوصول المتكرّر إلى الحافظة إلى إثارة مخاوف بشأن الخصوصية، لأنّ التطبيقات تقرأ بيانات الحافظة باستمرار حتى عندما لا تتغيّر. وقد يشعر المستخدمون الذين يهتمون بخصوصية محتوى الحافظة بأنّ هذا الإجراء يقتحم خصوصيتهم.

حدث `clipboardchange`

ولمواجهة هذه التحديات، نفّذنا حدثًا جديدًا باسم clipboardchange، ونحن بصدد إطلاق تجربة أصلية في كل من Edge وChrome، ليصبح بإمكانك اختبارها في تطبيقاتك.

يتيح هذا الحدث لتطبيقات الويب الردّ بشكل تفاعلي على التغييرات في الحافظة بدلاً من البحث عنها بشكل استباقي. يتم تشغيل هذه الخدمة تلقائيًا عند نسخ المحتوى أو قصه إلى الحافظة من أي تطبيق، أو عند محو الحافظة، أو عند لصق المحتوى (ما قد يؤدي إلى محو الحافظة في بعض الحالات). لا يتم تشغيل الحدث إلا عندما يكون المستند في المقدّمة.

يمكنك الاستماع إلى الحدث clipboardchange من خلال إضافة مستمع على واجهة navigator.clipboard كما هو موضّح هنا:

navigator.clipboard.addEventListener('clipboardchange', event => {
  console.log('Clipboard content changed!');
  console.log('Available MIME types:', event.types);

  // Update UI based on available formats
  updatePasteButtons(event.types);
});

المزايا الرئيسية

يوفّر حدث clipboardchange العديد من المزايا مقارنةً بالاستقصاء:

الكفاءة: لا يتم تنشيط الأحداث إلا عند حدوث تغييرات فعلية.
الحفاظ على الخصوصية: لا يعرض الحدث سوى أنواع MIME الأصلية، وليس المحتوى الفعلي.
عدم ظهور طلبات الحصول على الأذونات: بما أنّه لا يتم الكشف عن أي بيانات حسّاسة، لا يلزم الحصول على إذن من المستخدم.
الاستجابة في الوقت الفعلي: يتم تعديل واجهة المستخدم على الفور عند تغيير المحتوى في الحافظة.
مراعية التركيز: لا يتم تنشيط الأحداث إلا عندما يكون المستند في المقدّمة.

السمة `types`

يتضمّن عنصر الحدث clipboardchange السمة types التي تحتوي على مصفوفة من أنواع MIME المتوفّرة في الحافظة:

navigator.clipboard.addEventListener('clipboardchange', event => {
  // Example types array: ['text/plain', 'text/html', 'image/png']
  const hasText = event.types.includes('text/plain');
  const hasImage = event.types.includes('image/png');
  const hasHtml = event.types.includes('text/html');

  // Enable/disable paste buttons accordingly
  document.getElementById('paste-text').disabled = !hasText;
  document.getElementById('paste-image').disabled = !hasImage;
  document.getElementById('paste-html').disabled = !hasHtml;
});

سلوك التركيز

إذا حدثت تغييرات في الحافظة أثناء عدم التركيز على المستند، سيتم تنشيط حدث clipboardchange واحد عند استعادة التركيز على المستند. لن تتوفّر معلومات سجلّ التغييرات السابقة في الحافظة، وسيتم تضمين الأنواع المتاحة فقط عند التركيز على الصفحة في السمة types.

اختبار حدث `clipboardchange` اليوم

يمكنك اختبار حدث clipboardchange الجديد اليوم باتّباع الخطوات التالية:

إما محليًا من خلال تفعيل الميزة في متصفّحك فقط
أو على تطبيق الويب المخصّص للإنتاج، من خلال التسجيل في التجربة الأصلية.

رصد الحدث `clipboardchange` لتحسين التوافق

أولاً، بما أنّ هذه ميزة جديدة، عليك التأكّد من توفّرها قبل استخدامها. يمكنك تحقيق ذلك من خلال اختبار ما إذا كانت السمة onclipboardchange متوفّرة في navigator.clipboard، كما هو موضّح هنا:

if ('onclipboardchange' in navigator.clipboard) {
  // The clipboardchange event is supported
  navigator.clipboard.addEventListener('clipboardchange', handleClipboardChange);
} else {
  // Fallback to polling or other methods
  console.log('clipboardchange event not supported, using fallback');
  setInterval(checkClipboard, 2000);
}

الاختبار محليًا

لاختبار الحدث clipboardchange في المتصفّح فقط، اتّبِع الخطوات التالية:

افتح صفحة about://flags.
ابحث عن ClipboardChangeEvent في مربّع البحث عن العلامات.
استخدِم القائمة المنسدلة وغيِّر القيمة من تلقائي إلى مفعّل.
إعادة تشغيل المتصفّح

الاشتراك في التجربة الأصلية

لتجربة حدث clipboardchange على موقعك الإلكتروني مع مستخدمين حقيقيين، يمكنك الاشتراك في التجربة الأصلية في Chrome أو Edge. ستُجرى التجربة الأصلية في Chrome وEdge بين الإصدارَين 140 و142 (بين 2 أيلول (سبتمبر) 2025 و2 كانون الأول (ديسمبر) 2025).

يمكنك الاطّلاع على كيفية بدء استخدام الميزات التجريبية الأصلية لمعرفة المزيد عن الميزات التجريبية الأصلية وكيفية البدء في استخدامها.

عرض توضيحي

للاطّلاع على الحدث أثناء تنفيذه، يمكنك استكشاف العرض التوضيحي والاطّلاع على رمز المصدر على GitHub.

يوضّح هذا العرض التوضيحي كيف يمكن استخدام الحدث clipboardchange لإنشاء واجهة لصق متجاوبة يتم تعديلها تلقائيًا استنادًا إلى محتوى الحافظة.

جرِّب نسخ أنواع مختلفة من المحتوى (نص وصور وHTML) وشاهِد كيف يتم تفعيل أزرار اللصق وإيقافها في الوقت الفعلي بدون أي استطلاع.

الملاحظات

يسرّنا معرفة رأيك بشأن طريقة عمل حدث clipboardchange في حالات الاستخدام الخاصة بك. يمكنك تقديم ملاحظات وآراء من خلال إنشاء مشكلة في مستودع W3C/clipboard-apis.
ستساعدنا الإشارات العلنية التي تشير إلى اهتماماتك، بالإضافة إلى المتصفّحات الأخرى، في فهم مدى أهمية هذه الميزة بالنسبة إليك، ما قد يساعد في عملية توحيد المعايير.

على الرغم من إمكانية استخدام هذا الحدث كتحسين تدريجي، نريد توحيد معاييره كجزء من مواصفات Clipboard API، وأن نراه في النهاية معتمدًا من جميع المتصفحات. في الوقت الحالي، يمكنك الرجوع إلى الاستطلاع أو غيره من تقنيات مراقبة الحافظة.

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