كيف تقوم الخدمات المستضافة مثل UserVoice بتضمين محتواها على مواقع الويب الأخرى؟

Question

كيف تقوم الخدمات المستضافة مثل UserVoice بتضمين محتواها على مواقع الويب الأخرى؟

أرى أن ذلك يتم عبر تضمين ملف JavaScript من مزود الخدمة على صفحتك الخاصة، ومع ذلك، ما يهمني هو العناصر الأساسية لإنشاء خدمة كهذه.

على سبيل المثال، هل يستخدمون مكتبة مثل jQuery أو mooTools أو Prototypejs وكيف يتجنبون تضارب مساحة الاسم؟

تساءلت أيضًا عما إذا كان هناك أي كتب أو مقالات أو منشورات مدونة تتناول هذا الاستخدام المحدد لجافا سكريبت (لا تبحث عن موارد عامة في جافا سكريبت).

التحيات وشكرا مقدما،

إليوت

Answer 1

وهنا هو تعليمي كبير وجدت على كيفية بناء القطعة الويب (باستخدام مسج)

Answer 2

وعموما، ما كنت واصفا يسمى "جافا سكريبت القطعة" (UserVoice ليحدث لمجرد أن تظهر على جانب الصفحة).

وهناك تعليمي جيد حول <لأ href = "http://www.neeraj.name/blog/articles/846-how-to-create-a-dynamic-javascript-widget" يختلط = "نوفولو noreferrer" > خلق جافا سكريبت الحاجيات التي يمكنك إنهاء إجراءات المغادرة.

Answer 3

سيكون الهيكل الأساسي لهذه الخدمة القابلة للتضمين هو:

1. إذا لم تطلب الخدمة تضمين البرنامج النصي في أسفل الصفحة، فقم بربط حدث تحميل النص، دون التدخل في أصابع أي معالجات موجودة (عن طريق اعتراض وظيفة المعالج الموجودة، والتي يمكن أن تكون بدورها متسلسلة إلى وظائف أخرى).
2. أدخل عناصر HTML جديدة في المستند.من المرجح أن يتم تضمين كود HTML في البرنامج النصي كسلسلة حرفية، حيث أن تعيين HTML الداخلي على عنصر واحد تم حقنه سيكون أسهل وأسرع من معالجة DOM المباشرة باستخدام موجة من استدعاءات الوظائف.
3. يجب أن يكون النص بأكمله داخل إغلاق لتجنب تضارب الأسماء.
4. قد يتم أو لا يتم استخدام إطار عمل JS؛يجب توخي الحذر عند تضمين إطار عمل لأنه قد يتعارض مع إطار عمل مختلف موجود مسبقًا أو إصدار مختلف من نفس الإطار.

Answer 4

وEDT: عموما سوف يصبح لديك العميل / الزبون / صديق يتضمن البرنامج النصي في الصفحة الخاصة بهم، ثم عبر هذا السيناريو يمكن أن تفعل ما يلي:

في JS نقية يمكنك تحميل البرامج النصية من مكان بعيد (أو ليس بعيدا جدا) حيوي عبر

   var script = document.createElement('script');
   script.type = 'text/javascript';
   script.src = 'your/remote/scripts/path.js';
   document.getElementsByTagName('body')[0].appendChild(script);

و// $ .getScript ( 'الخاص بك / البعيد / مخطوطات / path.js')؛ في مسج ولكن عليك أن تتأكد من مسج تحميلها على موقع بعيد

وبعد ذلك السيناريو الذي قمت بتحميله يمكن أن تؤدي إجراءات مختلفة مثل خلق عناصر مثل هذا

والجسم فار = document.getElementsByTagName ( 'الهيئة') [0]؛ فار أديب = document.createElement ( 'السيناريو')؛ / * هنا يمكنك تعديل عناصر div الممتلكات الخاصة بك والبحث * / body.appendChild (أديب)؛ // $ ( '') appendTo. ( 'الهيئة')؛ لمسج

لنظرة أعمق إلى تشغيل الجافا يمكنك أن تقرأ على سبيل المثال جافا سكريبت: أجزاء جيدة أو <ل أ href = "http://oreilly.com/catalog/9780596000486" يختلط = "نوفولو noreferrer"> الدليل النهائي لجافا سكريبت .