आइफ्रेम का उपयोग कैसे करें

आइफ्रेम तत्व (आंतरिक फ्रेम के लिए संक्षिप्त) को अन्य स्रोतों से सामग्री को एक HTML पृष्ठ में एम्बेड करने के लिए डिज़ाइन किया गया है। उदाहरण के लिए, iframe के उपयोग के लिए धन्यवाद, आप अपना स्वयं का वीडियो प्लेयर बनाने और बड़ी वीडियो फ़ाइलों को संग्रहीत करने के बारे में नहीं सोच सकते। इसके बजाय, आप YouTube का उपयोग कर सकते हैं और iframe का उपयोग करके अपने वेब ऐप में आवश्यक वीडियो जोड़ सकते हैं।

YouTube वीडियो के लिए iframe का उपयोग करना

आइए एक विशिष्ट उदाहरण देखें। व्यवसाय प्रक्रियाओं में फ़ाइलों का उपयोग करने के बारे में AppMaster YouTube चैनल से एक वीडियो देखने के लिए एक पेज बनाएं। ऐसा करने के लिए, आपको कैनवास पर एक iframe तत्व रखने की आवश्यकता है, आवश्यक सेटिंग्स निर्दिष्ट करें (उदाहरण के लिए, आकार और इंडेंट में), और Src फ़ील्ड में वांछित वीडियो के लिए एक लिंक सेट करें।

उसी समय, यूट्यूब शुरू में इस तरह के वीडियो एम्बेडिंग की संभावना मानता है और प्रक्रिया की अधिकतम सुविधा के लिए आवश्यक टूल प्रदान करता है। वीडियो के नीचे “ Share ” बटन पर क्लिक करके, आप “ Embed ” विकल्प का उपयोग कर सकते हैं।

YouTube वीडियो को अपने पृष्ठ पर रखने के लिए सभी आवश्यक HTML कोड प्रदान करेगा, लेकिन हमारे मामले में, सभी कोड रुचिकर नहीं हैं, केवल आवश्यक वीडियो का लिंक है। आपको इसे कॉपी करने और इसे आईफ्रेम सेटिंग्स में रखने की जरूरत है।

डिफ़ॉल्ट चौड़ाई और ऊंचाई सेटिंग्स - 560 और 315 - भी यहां दिखाई दे रही हैं।

आप एप्लिकेशन को प्रकाशित कर सकते हैं और सुनिश्चित कर सकते हैं कि अब इसमें वास्तव में एक एम्बेडेड वीडियो है।

इसी प्रकार, आप अन्य स्रोतों से अन्य प्रकार के डेटा एम्बेड कर सकते हैं। उदाहरण के लिए, एक नक्शा जोड़ें।

इन सेटिंग्स के परिणामस्वरूप, आप नक्शे को एक मोटी बिंदीदार सीमा के साथ एक वृत्त के रूप में प्रदर्शित कर सकते हैं।

iframe में कस्टम HTML का उपयोग करना

आइए अधिक जटिल विकल्प पर विचार करें। हम iframe के लिए स्वतंत्र रूप से html पृष्ठ बनाएंगे, और तृतीय-पक्ष स्रोतों से डेटा का उपयोग नहीं करेंगे। ऐसा करने के लिए, कैनवास में RichtextEditor तत्व जोड़ें। यह आपको एक सुविधाजनक विज़ुअल एडिटर की मदद से और HTML कोड के सीधे संपादन के माध्यम से HTML बनाने की अनुमति देता है।

इसे बनाना आवश्यक है ताकि संपादक में बनाए गए किसी भी HTML को फ़ाइल के रूप में सहेजा जा सके और फिर iframe के माध्यम से प्रदर्शित किया जा सके। चलिए एक बटन जोड़ते हैं और संबंधित व्यवसाय प्रक्रिया बनाते हैं जिसे क्लिक करने पर लॉन्च किया जाएगा।

व्यवसाय प्रक्रिया के भाग के रूप में, आपको चाहिए:

1. Richtext Get Properties ब्लॉक का उपयोग करके संपादक से HTML प्राप्त करें.
2. HTML को बाइट्स ( To Bytes में) में कनवर्ट करें।
3. फ़ाइल बनाने के लिए Make File ब्लॉक का उपयोग करें। ध्यान रखें कि एक फ़ाइल बनाने के लिए, आपको केवल इसकी सामग्री ( Bytes , इसे पिछले चरण में प्राप्त किया गया था) और नाम (यह कुछ भी हो सकता है, लेकिन इसे स्थापित करना होगा) की आवश्यकता है।
4. बनाई गई फ़ाइल को सर्वर पर भेजें, और इसे डेटाबेस में सहेजें ( Server request POST /_files/ )।
5. बनाई गई फ़ाइल की आईडी प्राप्त करें (फ़ाइल का Expand File - ID )
6. आईडी को स्ट्रिंग में बदलें ( To String में)
7. Concat String का उपयोग करके किसी फ़ाइल का लिंक एकत्रित करें। नतीजा https://vdjyien-app.apms.io/api/_files/dQhJVTYrToCqr9G4KWKRD/download/ जैसा लिंक होना चाहिए, जहां "vdjyien-app.apms.io" आपका सर्वर पता है, और "dQhJVTYrToCqr9G4KWKRD" फ़ाइल है पिछले चरण में प्राप्त आईडी। परिणामी लिंक एक ब्राउज़र में खुलना चाहिए। सुनिश्चित करें कि एंडपॉइंट प्राप्त करने वाली फ़ाइल ( GET /_files/:id/download/ ) को प्राधिकरण की आवश्यकता नहीं है और यह एक्सेस के लिए खुला है।
8. यदि लिंक ठीक है, तो केवल इसे iframe में पास करना और परिणाम देखना ( iFrame Update Properties ) रह जाता है।

अब Richtext Editor में बनाया गया कोई भी HTML डेटाबेस में संग्रहीत किया जा सकता है और एप्लिकेशन में प्रदर्शित किया जा सकता है। इस प्रकार, iframe ब्लॉक का उपयोग करके, आप अपने एप्लिकेशन में ऐसे तत्व भी जोड़ सकते हैं जो प्रारंभ में डिज़ाइनर द्वारा प्रदान नहीं किए गए हैं, गैर-मानक फ़ॉन्ट का उपयोग करते हैं, या कस्टम HTML कोड वाले ब्लॉक बना सकते हैं।