تشغيل جافاسكريبت عند النقر على أي رابط صفحة، ولكن قبل تحميل محتوى الصفحة؟

مطور
1

مرحباً.
عند تغيير الصفحة في Discourse، تبدو الخطوات كالتالي:

  1. نضغط على الرابط
  2. يختفي المحتوى الحالي ويظهر مؤشر التحميل
  3. يتم تحديث عنوان URL ويظهر المحتوى الجديد

يختلف هذا قليلاً عند الانتقال من صفحة إلى الصفحة الرئيسية، حيث يتم تغيير عنوان URL إلى عنوان الصفحة الرئيسية عند اختفاء المحتوى الحالي، وليس عند ظهور المحتوى الجديد.

هدفي هو الحصول على سكريبت يُنفذ فور الضغط على أي رابط صفحة في Discourse.
api.onPageChange لا يناسب هذه الحالة لأن الكود يُنفذ تقريباً في نفس الوقت الذي يتم فيه تحميل محتوى الصفحة الجديدة.

هل توجد طريقة في Discourse لذلك؟ لقد راجعت محفزات الأحداث ولم أجد أي منها يتوافق مع ما أحتاجه.

إعجاب واحد (1)
2

مرحبًا :wave:

لا توجد حاليًا طريقة في واجهة برمجة التطبيقات للإضافات (Plugin-API) تسمح لك بتشغيل سكريبت قبل انتقال الصفحة، لأن هذا الأمر لم يظهر من قبل حسب ما أتذكر.

مع ذلك، يمكنك الاعتماد على إجراء willTransition() في مسار التطبيق (application route)

يمكنك استخدام شيء مشابه لهذا في السمة (theme) أو المكون (component) الخاص بك

// هذا يُنفذ بعد الانتقال
api.onPageChange((url, title) => {
  console.log("after transition");
});

// هذا يُنفذ مباشرة قبل الانتقال
api.modifyClass("route:application", {
  pluginId: "some-name",
  actions: {
    willTransition() {
      // قم بتشغيل الكود الأساسي أولاً
      this._super(...arguments);
      // ثم قم ببعض المهام
      console.log("before transition");
      // يمكنك أيضًا فعل شيء مثل هذا لمعرفة البيانات المتاحة لديك
      // للعمل معها مثل _router
      console.log(this)
    }
  }
});
6 إعجابات
3

بالضبط ما كنت أحتاجه. شكرًا لك!

إعجابَين (2)
4

يبدو أن هذا لا يتم تفعيله عند الدخول إلى موضوع من قائمة الموضوعات؟

لقد حاولت أيضًا إضافة واحد:

      api.modifyClass("route:topic", {
        pluginId: PLUGIN_ID,
        actions: {
          willTransition() {

ولكن هذا لا يتم تفعيله أيضًا.

5

هناك سببان قد لا يعمل هذا:

  1. وضع الإجراءات في تجزئة (hash) هو صيغة قديمة لم نعد نستخدمها في Discourse. نظريًا يجب أن تعمل، ولكن التوافق مع الصيغة الجديدة قد لا يكون مثاليًا. الطريقة الحديثة ستكون

    api.modifyClass("route:application", (Superclass) => class extends Superclass {
  @action
  willTransition() {
    console.log("do something");
    super.willTransition(...arguments);
  }
});

    ينطبق إخلاء المسؤولية القياسي لتعديل الفئة (modifyClass): هذا محفوف بالمخاطر ويمكن أن يتوقف عن العمل في أي وقت

  2. لا أعتقد أن willTransition مضمونة للعمل في مسار التطبيق (application route) في جميع المواقف. (على سبيل المثال، إذا كان للمسار الفرعي إجراء willTransition، فلن ينتقل بالضرورة للأعلى)

أوصي باستخدام الأحداث الموجودة في خدمة مسار Ember (Ember router service) بدلاً من ذلك: RouterService | 5.12.0 | Ember API Documentation

على سبيل المثال، شيء مثل

const router = api.container.lookup("service:router");
router.on("routeWillChange", () => {
  console.log("route will change fired");
});
إعجابَين (2)
6

رائع، شكرًا ديفيد، سأجرب ذلك لاحقًا!

تم إطلاق هذا التحقيق (همم) لأنني كنت بحاجة إلى طريقة لتشغيل شيء ما عند كل تغيير في الصفحة، وقبل العرض.

يبدو أن حدث واجهة برمجة تطبيقات تغيير الصفحة غير مضمون لإطلاقه قبل عرض عناصر الصفحة، على ما يبدو.

إعجاب واحد (1)
7

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

من الواضح أنني لا أعرف ما هو هدفك النهائي… لذا ربما يكون الألم مبررًا. في هذه الحالة: لا تتردد في تجاهلي :wink:

(بالطبع، إذا كنت ترغب في فتح موضوع Dev حول المشكلة التي تحاول حلها، فسأكون سعيدًا بالاطلاع عليها)

8

يسعدني أن أكون صريحًا لأن الكود مفتوح المصدر:

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

أي تحسين مرحب به وقد قمت بالفعل بتحقيق ذلك في قائمة المواضيع باستخدام كود جواهاني. (في طلب سحب مفتوح).

لكن هذا ترك الموضوع … سأجرب اقتراحك تاليًا وأتبناه في كلتا الحالتين إذا أدى ذلك إلى تحسين الأمور بشكل أكبر.

9

أرى ذلك، لذا فأنت لا تعدل DOM مباشرة :ok_hand:
في هذه الحالة، آمل أن تعمل routeWillChange - يجب أن يتم تشغيلها بالتأكيد قبل عرض المسار التالي.
التحذير هو أن… في حالة أشياء مثل عمليات إعادة التوجيه، قد يتم تشغيلها مرتين. أو قد يتم تشغيلها، ثم يتم إلغاء الانتقال في النهاية. ولكن ربما يكون هذا جيدًا في هذه الحالة.

إعجابَين (2)
10

نعم، لا يوجد أي تعديل مباشر خبيث لعناصر DOM هنا في Merefield Technology Towers. :sweat_smile:

نعم، سأستخدم الخدمة، هذا هو الغرض منها! سأعود بتجربتي حيث أنني متأكد من أن النتائج قد تثير اهتمام الآخرين.

3 إعجابات
11

نعم، هذا ينظف الأمور وتحدث الأشياء بالترتيب الصحيح على كلا المسارين الآن.

:rocket:

شكرا لمساعدتك!

إعجابَين (2)