تم تصميم عنصر iframe (اختصار للإطار الداخلي) لتضمين محتوى من مصادر أخرى في صفحة HTML. على سبيل المثال ، بفضل استخدام إطار iframe ، لا يمكنك التفكير في إنشاء مشغل فيديو خاص بك وتخزين ملفات فيديو كبيرة. بدلاً من ذلك ، يمكنك استخدام YouTube وإضافة الفيديو المطلوب إلى تطبيق الويب الخاص بك باستخدام إطار iframe.
استخدام iframe لفيديو يوتيوب
لنلق نظرة على مثال محدد. لنقم بإنشاء صفحة لمشاهدة مقطع فيديو من قناة AppMaster على YouTube حول استخدام الملفات في العمليات التجارية. للقيام بذلك ، تحتاج إلى وضع عنصر iframe على اللوحة القماشية ، وتحديد الإعدادات الضرورية (على سبيل المثال ، في الحجم والمسافات البادئة) ، وتعيين ارتباط إلى الفيديو المطلوب في حقل Src .
في الوقت نفسه ، يفترض موقع YouTube في البداية إمكانية تضمين مثل هذا الفيديو ويوفر الأدوات اللازمة لتحقيق أقصى قدر من الراحة للعملية. بالنقر فوق الزر " Share " أسفل الفيديو ، يمكنك استخدام خيار " Embed ".
سيوفر YouTube كل كود HTML الضروري لوضع الفيديو على صفحته ، ولكن في حالتنا ، ليست كل التعليمات البرمجية ذات أهمية ، فقط رابط إلى الفيديو المطلوب. تحتاج إلى نسخه ووضعه في إعدادات iframe.
إعدادات العرض والارتفاع الافتراضية - 560 و 315 - مرئية هنا أيضًا.
يمكنك نشر التطبيق والتأكد من أنه يحتوي بالفعل على فيديو مضمّن.
وبالمثل ، يمكنك تضمين أنواع أخرى من البيانات من مصادر أخرى. على سبيل المثال ، أضف خريطة.
كنتيجة لهذه الإعدادات ، يمكنك عرض الخريطة كدائرة ذات حد سميك منقط.
استخدام HTML المخصص في iframe
لنفكر في خيار أكثر تعقيدًا. سننشئ بشكل مستقل صفحات html لإطار iframe ، ولن نستخدم بيانات من مصادر خارجية. للقيام بذلك ، قم بإضافة عنصر RichtextEditor إلى اللوحة القماشية. يسمح لك بإنشاء HTML ، سواء بمساعدة محرر مرئي مناسب ومن خلال التحرير المباشر لرمز HTML.
من الضروري إجراء ذلك بحيث يمكن حفظ أي HTML تم إنشاؤه في المحرر كملف ، ثم عرضه عبر إطار iframe. دعنا نضيف زرًا وننشئ عملية الأعمال المقابلة التي سيتم إطلاقها عند النقر عليها.
كجزء من عملية الأعمال ، يجب عليك:
- احصل على HTML من المحرر باستخدام كتلة Richtext Get Properties .
- تحويل HTML إلى بايت ( To Bytes ).
- استخدم كتلة إنشاء Make File لإنشاء ملف. ضع في اعتبارك أنه لإنشاء ملف ، فأنت تحتاج فقط إلى محتوياته (تم الحصول عليه من Bytes في الخطوة السابقة) والاسم (يمكن أن يكون أي شيء ، ولكن يجب تثبيته).
- أرسل الملف الذي تم إنشاؤه إلى الخادم ، واحفظه في قاعدة البيانات ( Server request POST /_files/ ).
- الحصول على معرف الملف الذي تم إنشاؤه ( Expand File - ID )
- تحويل المعرف إلى سلسلة ( To String )
- اجمع رابطًا لملف باستخدام Concat String . يجب أن تكون النتيجة رابطًا مثل https://vdjyien-app.apms.io/api/_files/dQhJVTYrToCqr9G4KWKRD/download/ ، حيث "vdjyien-app.apms.io" هو عنوان الخادم الخاص بك و "dQhJVTYrToCqr9G4KWKRD تم الحصول على المعرف في الخطوة السابقة. يجب أن يفتح الرابط الناتج في المتصفح. تأكد من أن الملف الذي يتلقى نقطة النهاية نفسه ( GET /_files/:id/download/ ) لا يتطلب ترخيصًا وأنه مفتوح للوصول.
- إذا كان الرابط على ما يرام ، فكل ما تبقى هو تمريره إلى iframe ورؤية النتيجة ( iFrame Update Properties ).
الآن يمكن تخزين أي HTML تم إنشاؤه في Richtext Editor في قاعدة البيانات وعرضه في التطبيق. وبالتالي ، باستخدام كتلة iframe ، يمكنك حتى إضافة عناصر إلى تطبيقك لم يتم توفيرها في البداية بواسطة المصمم ، أو استخدام خطوط غير قياسية ، أو إنشاء كتل باستخدام كود HTML مخصص.
