كيفية عرض نموذج في أي صفحات الموقع باستخدام بووكمركلت (مثل ملاحظة في قارئ جوجل)?

Question

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

من الواضح أنني حاولت أن نلقي نظرة على كيف يتم ذلك, ولكن الأجزاء الأكثر إثارة للاهتمام هي مصغر قابل للقراءة.لذا...

أي أفكار بشأن كيفية تنفيذ شيء من هذا القبيل (على الجانب المتصفح)?ما هي القضايا التي هناك ؟ بلوق وظائف القائمة واصفا هذا ؟

Answer 1

Aupajo له ذلك الحق.أنا سوف ادلك على بووكمركلت إطار لقد عملت على موقعنا (www.iminta.com).

بووكمركلت نفسها كما يلي:

javascript:void((function(){var%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('src','http://www.iminta.com/javascripts/new_bookmarklet.js?noCache='+new%20Date().getTime());document.body.appendChild(e)})())

هذا فقط يقحم سيناريو جديد في المستند الذي يتضمن هذا الملف:

http://www.iminta.com/javascripts/new_bookmarklet.js

من المهم أن نلاحظ أن المختصر يخلق iframe, مواقف و يضيف الأحداث إلى وثيقة تسمح للمستخدم أن تفعل أشياء مثل ضرب الهروب (إغلاق النافذة) أو التمرير (لذلك يبقى مرئية).كما يخفي العناصر التي لا تلعب بشكل جيد مع z-تحديد المواقع (فلاش ، على سبيل المثال).وأخيرا ، فإنه يسهل التواصل عبر جافا سكريبت يعمل داخل iframe.في هذه الطريقة, هل يمكن أن يكون زر إغلاق في iframe أن يقول الوالد الوثيقة إلى إزالة الإطار.هذا النوع من عبر المجال الأشياء هي قليلا hacky, لكنه الطريق الوحيد (رأيت) فعل ذلك.

ليس خدعة من القلب ؛ إذا كنت ليست جيدة في جافا سكريبت ، إعداد النضال.

Answer 2

في أنها أساسية جدا المستوى فإنه سوف يكون باستخدام createElement لخلق عناصر لإدراج إلى الصفحة ، appendChild أو insertBefore إلى إدراجها في الصفحة.

Answer 3

يمكنك استخدام بسيط المختصر إضافة <script> tag which loads an external JavaScript file that can push the necessary elements to the DOM and present a modal window to the user.النموذج المقدم عبر اياكس الطلب ، تتم معالجتها من جانب الخادم ، وإرجاع مع النجاح أو قائمة من الأخطاء المستخدم يحتاج إلى تصحيح.

لذلك المختصر تبدو مثل:

جافا سكربت:كود-إلى-إضافة البرنامج النصي-الوسم-و-init-the-النصي.

الخارجية السيناريو ما يلي:

• القدرة على إضافة عنصر DOM
• القدرة على تحديث innerHTML من هذا العنصر أن تكون العلامات التي تريد عرضها على المستخدم
• التعامل مع AJAX نموذج تجهيز

نافذة التأثير يمكن أن يتحقق مع CSS لتحديد المواقع.

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