نافذات الضوء IFrame

هذا مكون موضوع يضيف إمكانية فتح الإطارات المضمنة (iFrames) داخل نوافذ منبثقة خفيفة (lightbox).

أمثلة

يضيف هذا المكون زر “توسيع” في أعلى الإطارات المضمنة التي يتم تفعيله عليها.

عند النقر على الزر، سيتم فتح الإطار المضمن في وضع ملء الشاشة داخل نافذة منبثقة خفيفة.

يؤدي النقر إما على المنطقة الداكنة المحيطة بالإطار المضمن أو على x في الزاوية العلوية اليمنى إلى إغلاق النافذة المنبثقة الخفيفة. بنفس الطريقة التي تعمل بها النوافذ المنبثقة الافتراضية للصور.

الإعدادات

هناك إعداد واحد فقط. تقوم بإضافة النطاقات التي تريد تفعيل هذه الوظيفة عليها هناك.

:warning: أي نطاقات تحددها هنا يجب أيضًا أن تكون مدرجة في قائمة السماح في إعداد الموقع allowed_iframes لكي تظهر في المنشورات من الأساس.

أمثلة على الاستخدام:

إليك بعض الأمثلة بخلاف إطار CodePen المضمن أعلاه

إطار Google Forms المضمن:

تضمين موقع weather.gov بالكامل:

الائتمان:

يستخدم هذا المكون مكتبة Featherlight الرائعة لـ Noël Bossart (رخصة MIT - 3kb مضغوطة)

31 إعجابًا

I suppose these iframes still also need to be activated in the allowed iframes site setting?

5 إعجابات

Correct, this component will not mess with any whitelisting settings at all.

In order for any iframe to show up in the cooked content of a post - expandable or not - it has to be on the list of allowed_iframes setting like you pointed out.

I’ll add a note about this to the topic.

5 إعجابات

@Johani is this component still functional? If so, any thoughts on why I am not getting the pop-out diagonal-arrows in the upper-right, but rather a blank/dead box?

Here is what I’ve tried:

  • Updated themes/components.
  • Made sure src links were white-listed in the component and the Discourse settings.
  • Tried a few different links, including Google Maps.
  • Tried several scenarios with the Media Overlay on/off + Lightbox alone on/off.

Below are some screenshots.

Thx!
-Patrick





image
image
image
image

Dear @Johani,

thank you very much for conceiving and maintaining this theme component.

After installing it on https://community.hiveeyes.org/ the other day, some users recently started to complain that the overall appearance of the head of the page looked different for them. They finally found out the reason was that they blocked cloudflare altogether, so all requests to https://cdnjs.cloudflare.com/ajax/libs/featherlight/1.7.13/featherlight.min.js would fail.

So, we are humbly asking if there would be a way for you to provide this component in a self-contained variant?

With kind regards,
Andreas.

3 إعجابات

لماذا هو مخصص لأجهزة سطح المكتب فقط؟

واجهت خطأً في مكون هذا السمة، حيث لم تكن محتويات المنشورات تظهر.

هل يمكنني فتح iframe في أي رابط ببساطة؟
يرى المستخدم الـ iframe فقط عند النقر على الرابط

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

حسناً… لقد سقط هذا في شقوق النسيان. لقد مر وقت طويل منذ أن حظي بأي اهتمام، وقد تغير الكثير في Discourse.

الأفضل متأخراً من ألا يكون أبداً… :upside_down_face:

لقد دفعت للتو تحديثاً من المفترض أن يحل جميع المشاكل.

سيكون كذلك بعد التحديث.

أصبح المكون الآن مستقلاً بذاته ولا يتخذ أي طلبات خارجية.

بعد التحديث، سيعمل أيضاً على الأجهزة المحمولة.

يجب أن يتم إصلاح ذلك بعد التحديث.

هذا خارج نطاق هذا المكون. ستحتاج إلى مكون مختلف للتعامل مع ذلك.

نعتذر عن التأخير، ونشكركم على ملاحظاتكم :+1:

7 إعجابات

شكراً جزيلاً!

لا داعي للاعتذار، من الجيد أن نرى أنك تمكنت من الاهتمام بها، بين كل الأشياء الأخرى التي تحدث. نحن نقدر ذلك حقًا.

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

هل توجد بالفعل مكونة يمكنها فتح iframe lightbox في رابط بهذه الطريقة؟

لست على علم بأي مكونات موجودة تقوم بذلك، لذا سيتعين عليك إنشاء واحدة أو تكليف بهذا العمل في فئة Marketplace.

يقوم مكون السمة هذا بالتحقق من iFrame في منشور ويقارن سمة src الخاصة به بـ قائمة المصادر المؤهلة التي يوفرها المسؤول في إعدادات المكون. إذا تطابق نطاق المصدر، فإنه يضيف زر الإضاءة الخفيفة. تتم معالجة عرض الإضاءة الخفيفة بواسطة featherlight.js. يستمع Featherlight إلى النقرات على العناصر التي تحتوي على السمة data-featherlight. إذا تم النقر على أحد هذه العناصر، فإنه يفتح الإضاءة الخفيفة بمحتويات هذا الـ iFrame.

يمكنك فعل الشيء نفسه مع علامات <a> في مكون مختلف مع القليل من الجهد. إذا تطابق href الرابط مع نطاق مدرج في إعدادات المكون، فقم بإضاءته في إطار iFrame. وإلا، اتركه كرابط عادي. لا تريد أن تفتح جميع الروابط في إطار iFrame مضاء.

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

3 إعجابات

هذه إحدى الطرق لتضمين نافذة منبثقة للإطار المضمن (iFrame Lightbox) داخل عنصر نصي قابل للنقر …

يقبل المكون الإضافي لملاحظات Discourse (Discourse Footnotes Plugin) https://meta.discourse.org/t/discourse-footnote/84533 كود HTML بالإضافة إلى Markdown داخل الملاحظات المنبثقة.

لذلك، على سبيل المثال، هذا الكود …

… يولد هذه الملاحظة المنبثقة القابلة للنقر والتي تحتوي على إطار مضمن مصغر مع زر توسيع المحتوى في الزاوية العلوية اليمنى …

لجعل هذا يعمل، قمت (في إعدادات الموقع) بتمكين كل من تمكين ملاحظات Markdown و عرض الملاحظات بشكل مضمن

ثم أضفت اسم نطاق هذا الموقع (microchic.com) إلى قائمة الإطارات المضمنة المسموح بها في إعدادات الموقع …

… وأيضًا في قائمة نطاقات أصل الإطار المضمن في إعدادات المكون الإضافي للإطار المضمن (iFrame Lightbox Plugin) …

يمكنك تجربته مباشرة هنا …

مرحباً، كنت أتساءل عن كيفية تنسيق المنشورات. أحصل على مربع فارغ باستخدام

iframe src=" url" محاط بـ < > هذا حتى عند استخدام codepen.io الموجود في القائمة البيضاء للمواقع الرئيسية لإطارات iframe.

هل لا يزال هذا المكون يعمل؟ لقد كان يعمل لدي في الماضي ولكنه توقف عن العمل لسبب ما.
يبدو أن آخر تحديث كان قبل 3 سنوات: hnb-ku/discourse-iframe-lightboxes (github.com) لذا من المنطقي افتراض أن شيئًا ما قد تعطل؟

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

لقد كان يعمل في مايو حيث استخدمته هنا.

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

يعمل لدي مع أحدث إصدار من Discourse.

هل هناك أي خطأ في وحدة تحكم المتصفح؟

إعجابَين (2)

لا يمكنني جعل هذا يعمل، لقد اتبعت الدليل بدقة وأضفت النطاق إلى كل من مكون السمة وإعداد الموقع. إليك ما أحصل عليه:

لم يتم تسجيل أي أخطاء في وحدة تحكم مطور جافاسكريبت.

إعداد موقع الإطارات المضمنة المسموح بها يحتوي على النطاق ذي المستوى الأعلى:

https://example.biz/

تحتوي إعدادات مكون السمة عليه بدون https كما هو الحال في الأمثلة الموجودة:

example.biz

أي أفكار حول كيفية تصحيح الأخطاء؟

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

لا توجد أخطاء في وحدة التحكم.
أنا أستخدمه مع معاينات PDF: Inline PDF Previews - #116 by Alon1
أتوقع الحصول على أسهم التوسيع فوق ملف PDF

لكنها ببساطة لن تظهر

هل يمكنك تجربة هذا الفرع بدلاً من ذلك؟

URL: https://github.com/Arkshine/discourse-iframe-lightboxes
الفرع: improve-compatibility

لقد كنت محظوظًا من قبل إذا كان يعمل!

كلا الـ TCs يستخدمان نفس الـ API لتزيين منشور، لذا سيكون ترتيب تثبيتهما ضروريًا. أيضًا، يتم تعيين مصدر الـ iframe ديناميكيًا بمجرد تنزيل الـ PDF وقد لا يكون متاحًا على الفور في هذا الـ TC الخاص بـ IFrame Lighboxes.

التغييرات التي أجريتها هي بشكل أساسي:

  • البحث عن عناصر iframe في حلقة التشغيل التالية، لذلك يضمن توفر iframe
  • الانتظار حتى يتم تحميل iframe حتى تتمكن من استرداد عنوان URL للمصدر

أخبرني إذا كان يعمل بشكل أفضل. :+1:

4 إعجابات