الثقة جيدة، والملاحظة أفضل: الإصدار 2 من أداة مراقبة تقاطع

يضيف الإصدار 2 من أداة مراقبة التقاطع إمكانية، ليس فقط إلى مراقبة التقاطعات، ولكن أيضًا اكتشاف ما إذا كان العنصر المتقاطع مرئيًا في وقت التقاطع.

Thomas Steiner

إن الإصدار الأول من Intersection Observer هو إحدى واجهات برمجة التطبيقات التي ربما تحظى بشعبية عامة، والآن بعد أن يتوافق متصفّح Safari مع هذه الميزة أيضًا بل يمكن أيضًا استخدامه بشكل عام في جميع المتصفحات الرئيسية. لتنشيط ذاكرتك بسرعة عن واجهة برمجة التطبيقات، أنصحك بمشاهدة فيديو Surma رأس مصغّر فائق الشحن عند التقاطع الإصدار 1 من "المراقبة" المضمّن أدناه. يمكنك أيضًا قراءة كتابات سورما المتعمقة المقالة. استخدم الأشخاص الإصدار 1 من Intersection Observer لمجموعة كبيرة من حالات الاستخدام مثل التحميل الكسول للصور والفيديوهات يتم إشعارك عندما تصل العناصر إلى position: sticky، تنشيط أحداث الإحصاءات، وغيرها الكثير.

للحصول على التفاصيل الكاملة، يمكنك الاطّلاع على مستندات مراقبة التقاطع في MDN، ولكن للتذكير، هذا ما تبدو عليه واجهة برمجة التطبيقات Intersection Observer v1 في أكثر الحالة الأساسية:

const onIntersection = (entries) => {
  for (const entry of entries) {
    if (entry.isIntersecting) {
      console.log(entry);
    }
  }
};

const observer = new IntersectionObserver(onIntersection);
observer.observe(document.querySelector('#some-target'));

ما التحدي الذي يواجهه الإصدار 1 من أداة Intersection Observer؟

للتوضيح، يعد الإصدار 1 من Intersection Observer رائعًا، ولكنه ليس مثاليًا. تتوفر في بعض الحالات الزاوية التي تنقص فيها واجهة برمجة التطبيقات. دعنا نلقي نظرة فاحصة! يمكن لواجهة برمجة التطبيقات Intersection Observer v1 إخبارك عند تمرير عنصر إلى في إطار العرض، ولكنه لا يخبرك بما إذا كان العنصر محميًا. بأي محتوى آخر للصفحة (أي عندما يتم حجب العنصر) أو ما إذا تم تعديل العرض المرئي للعنصر باستخدام تأثيرات مرئية مثل transform وopacity filter وغيرها، مما قد يجعلها غير مرئية بشكل فعال.

بالنسبة لعنصر ما في مستند المستوى الأعلى، يمكن تحديد هذه المعلومات من خلال تحليل نموذج كائن المستند (DOM) عبر JavaScript، على سبيل المثال من خلال DocumentOrShadowRoot.elementFromPoint() ثم التعمق أكثر. في المقابل، لا يمكن الحصول على نفس المعلومات إذا كان العنصر المعني الموجودة في إطار iframe تابع لجهة خارجية.

ما الذي يجعل مستوى الظهور الفعلي إنجازًا كبيرًا؟

إنّ الإنترنت، للأسف، مكان يجذب الجهات المسيئة بنوايا سيئة. على سبيل المثال، قد يتم تحفيز الناشر المظلل الذي يعرض إعلانات الدفع بالنقرة في أحد مواقع المحتوى لخداع المستخدمين للنقر على إعلاناتهم لزيادة عائدات إعلانات الناشر (على الأقل لفترة قصيرة إلى أن ترصدها شبكة الإعلانات). ويتم عادةً عرض هذه الإعلانات في إطارات iframe. الآن، إذا أراد الناشر حث المستخدمين على النقر على مثل هذه الإعلانات، فيمكنه إنشاء إطارات iframe للإعلان الشفافية الكاملة من خلال تطبيق قاعدة CSS iframe { opacity: 0; } وتركيب إطارات iframe فوق عنصر جذاب، مثل فيديو عن قطة لطيفة قد يرغب المستخدمون في النقر عليه. وهذا ما يُسمّى تمويه النقر. يمكنك مشاهدة هجوم تمويه النقر أثناء العمل في القسم العلوي من هذه عرض توضيحي (جرِّب "مشاهدة" فيديو القطط وفعِّل "وضع الخداع"). ستلاحظ أنّ الإعلان في إطار iframe "يفكر" حصل على نقرات مشروعة، حتى لو شفافة تمامًا عندما تنقر عليه (تتظاهر بذلك طوعًا).

كيف يعمل الإصدار 2 من أداة Intersection Observer على إصلاح هذه المشكلة؟

يقدم الإصدار 2 من أداة مراقبة التقاطع مفهوم تتبع "مستوى الرؤية" الفعلي من الهدف عنصر كإنسان من شأنه تعريفه. ومن خلال تحديد خيار في دالة إنشاء IntersectionObserver، متقاطع IntersectionObserverEntry عند ذلك ستحتوي المثيلات على حقل منطقي جديد يسمى isVisible. تمثّل قيمة true في isVisible ضمانًا قويًا من عملية التنفيذ الأساسية. أن العنصر المستهدف غير محصور تمامًا بالمحتوى الآخر وليس له تأثيرات بصرية مطبَّقة من شأنها تغيير طريقة عرضه على الشاشة أو تشويهها. في المقابل، تعني القيمة false أنّ التنفيذ لا يمكن ضمان ذلك.

من التفاصيل المهمة المواصفات في أنّ عملية التنفيذ مسموح لها بالإبلاغ عن حالات سلبية خاطئة (أي ضبط isVisible على false حتى عندما يكون العنصر الهدف مرئيًا بالكامل وغير معدّل). تقصر المتصفحات نفسها على العمل باستخدام وضع الحدود، وذلك لأسباب متعلقة بالأداء أو لأسباب أخرى المربعات والهندسة الهندسية المستقيمة؛ فإنه لا يحاول تحقيق نتائج مثالية بوحدات البكسل تعديلات مثل border-radius.

ومع ذلك، لا يُسمح بـ النتائج الموجبة الخاطئة تحت أي ظرف من الظروف (أي تحديد من isVisible إلى true عندما يكون العنصر الهدف غير مرئي تمامًا وغير معدل).

كيف يبدو الرمز الجديد عمليًا؟

تستخدم الدالة الإنشائية IntersectionObserver الآن خاصيتَي ضبط إضافيتين: delay وtrackVisibility. delay هو رقم يشير إلى أقل فترة تأخير بالملي ثانية بين الإشعارات من المراقب لهدف معين. تُعدّ trackVisibility قيمة منطقية تشير إلى ما إذا كان المراقب سيتتبّع التغييرات في قيمة مستوى الرؤية.

من المهم ملاحظة أنه عندما تكون قيمة trackVisibility هي true، فيجب أن يكون delay في 100 على الأقل (أي ألا تزيد عن إشعار واحد كل 100 ملي ثانية). كما أشرنا سابقًا، يعد حساب مستوى الرؤية أمرًا مكلفًا، ويعد هذا الشرط إجراءً وقائيًا ضد انخفاض الأداء واستهلاك البطارية. وسيستخدم المطور المسؤول أكبر قيمة مقبولة للتأخير.

وفقًا للوضع الحالي المواصفات، مستوى الرؤية ويتمّ احتسابها على النحو التالي:

• إذا كانت سمة trackVisibility للمراقب هي false، سيُعتبَر الهدف مرئيًا. يتوافق ذلك مع السلوك الحالي v1.

• إذا كان الهدف يحتوي على مصفوفة تحويل فعالة بخلاف الترجمة ثنائية الأبعاد أو زيادة نسبية ثنائي الأبعاد، فعندئذٍ يُعد الهدف غير مرئي.

• إذا كان الهدف أو أي عنصر في سلسلة الكتل التي تحتوي عليه يتضمن معدل تعتيم فعال غير 1.0، فإن الهدف يعتبر غير مرئي.

• إذا تم تطبيق أي فلاتر على الهدف أو أي عنصر في سلسلة الكتل التي تحتوي عليه يُعتبر الهدف غير مرئي.

• إذا لم يكن من الممكن أن تضمن عملية التنفيذ عدم حظر الصفحة الأخرى المستهدفة بالكامل للمحتوى، يُعتبَر الهدف غير مرئي.

ويعني هذا أن عمليات التنفيذ الحالية اعتيادية مع ضمان وضوح الرؤية. على سبيل المثال، تطبيق فلتر تدرّج رمادي غير ملاحظ تقريبًا مثل filter: grayscale(0.01%) أو عند ضبط شفافية غير مرئية شبه ظاهرة في السمة opacity: 0.99، ستُعرض جميعها العنصر غير مرئية.

في ما يلي نموذج رمز قصير يوضّح ميزات واجهة برمجة التطبيقات الجديدة. يمكنك الاطّلاع على تتبُّع النقرات استخدام الذكاء الاصطناعي (AI) في القسم الثاني من العرض التوضيحي (ولكن الآن، حاول "مشاهدة" الفيديو حول الجراء). احرص على تفعيل "وضع الخداع". مرة أخرى على الفور يمكنك تحويل نفسك إلى ناشر غامض ومشاهدة كيف يمنع الإصدار الثاني من أداة Intersection Observer نقرات غير مشروعة على الإعلان من تتبعها. هذه المرة، نقدّم لك الإصدار الثاني من أداة Intersection Observer. 🎉

<!DOCTYPE html>
<!-- This is the ad running in the iframe -->
<button id="callToActionButton">Buy now!</button>

// This is code running in the iframe.

// The iframe must be visible for at least 800ms prior to an input event
// for the input event to be considered valid.
const minimumVisibleDuration = 800;

// Keep track of when the button transitioned to a visible state.
let visibleSince = 0;

const button = document.querySelector('#callToActionButton');
button.addEventListener('click', (event) => {
  if ((visibleSince > 0) &&
      (performance.now() - visibleSince >= minimumVisibleDuration)) {
    trackAdClick();
  } else {
    rejectAdClick();
  }
});

const observer = new IntersectionObserver((changes) => {
  for (const change of changes) {
    // ⚠️ Feature detection
    if (typeof change.isVisible === 'undefined') {
      // The browser doesn't support Intersection Observer v2, falling back to v1 behavior.
      change.isVisible = true;
    }
    if (change.isIntersecting && change.isVisible) {
      visibleSince = change.time;
    } else {
      visibleSince = 0;
    }
  }
}, {
  threshold: [1.0],
  // 🆕 Track the actual visibility of the element
  trackVisibility: true,
  // 🆕 Set a minimum delay between notifications
  delay: 100
}));

// Require that the entire iframe be visible.
observer.observe(document.querySelector('#ad'));

روابط ذات صلة

• أحدث مسودة للمحررين من مواصفات مراقب التقاطع.
• الإصدار 2 من أداة مراقبة التقاطع قيد التشغيل حالة النظام الأساسي Chrome.
• خطأ Chromium في الإصدار 2 من أداة Intersection Observer
• وميض نية تنفيذ عملية النشر:

شكر وتقدير

بفضل سيمون فنسنت، Yoav Weiss وMathias Bynens لمراجعة هذه المقالة، وكذلك ستيفان زاغر أيضًا لمراجعة الميزة وتنفيذها في Chrome صورة رئيسية من تصميم "سيرغي سيمين" على Un التصميم