Studio Editor: HTML iFrame एलिमेंट जोड़ना

HTML iFrame में एक्सटर्नल सर्वर और दूसरे सोर्स से विजुअल कंटेंट दिखाएं। वेदर विजेट, स्टॉक विजेट, कैलेंडर या अपनी पसंद का कोई भी कस्टम एलिमेंट बनाएं। आप कोड स्निपेट या एक्सटर्नल URL में से किसी एक को एंबेड कर सकते हैं।

Studio Editor साइट पर वेदर विजेट का उदाहरण, जिसे HTML iFrame का इस्तेमाल करके एंबेड किया गया है

कोड या साइट एंबेड करना

ऐड एलिमेंट्स पैनल से सीधे अपने क्लाइंट की साइट पर iFrame जोड़ें। चुनें कि आप कोड एंबेड करना चाहते हैं या साइट, फिर अपना कोड/वेब एड्रेस पेस्ट करें ताकि वह iFrame में दिखाई दे।

जरूरी:

अपना कोड एंबेड करने से पहले, हमारी गाइडलाइंस और लिमिटेशंस जरूर पढ़ें।

HTML iFrame जोड़ने के लिए:

एडिटर की बाईं ओर ऐड एलिमेंट्स पर क्लिक करें।
एंबेड और सोशल पर क्लिक करें।
पेज पर जोड़ने के लिए कोई एलिमेंट चुनें, फिर नीचे दिए गए संबंधित स्टेप्स फॉलो करें:

कोड एंबेड करें

साइट एंबेड करें

Studio Editor में iFrame एलिमेंट के अंदर वेबसाइट एड्रेस एंबेड करते हुए दिखाने वाला स्क्रीनशॉट।

दिखाए जा रहे कंटेंट का साइज एडजस्ट करना

एंबेडेड एलिमेंट्स में अक्सर पहले से तय width और height पिक्सल में शामिल होते हैं। इन्हें उस सर्विस के जरिए तय किया जाता है जहां से इन्हें लिया गया है, जैसा कि नीचे दिए गए उदाहरण में दिखाया गया है:

1<iframe width="560" height="315" 
2       src="https://www.wix.com/studio/academy" 
3        frameborder="0">
4</iframe>

अगर iFrame कंटेनर (कैनवस पर) 560 px * 315 px से छोटा है, तो इन सेटिंग्स की वजह से कंटेंट क्रॉप हो सकता है। कंटेंट को क्रॉप होने से बचाने के लिए, px वैल्यू को प्रतिशत यूनिट से बदलें और उन्हें 100% पर सेट करें, जैसा कि नीचे दिखाया गया है:

1<iframe width="100%" height="100%" 
2       src="https://www.wix.com/studio/academy" 
3        frameborder="0">
4</iframe>

Studio Editor में एंबेडेड कोड एडिट करना और कोड में width और height को 100% में बदलना

गाइडलाइंस और सीमाएं

वेबसाइट एड्रेस या कस्टम कोड को HTML iFrame में सही तरीके से एंबेड करने का तरीका जानने के लिए, नीचे दी गई गाइडलाइंस और सीमाएं पढ़ें।

गाइडलाइंस

पक्का करें कि आपके कोड में HTTPS शामिल हो, न कि HTTP, वरना यह आपकी लाइव साइट पर दिखाई नहीं देगा।
हमेशा पक्का करें कि आप जो कोड एंबेड कर रहे हैं, वह अप टू डेट और HTML5 के साथ कंपैटिबल हो। अगर पेज और स्क्रिप्ट HTML के पुराने वर्जन का इस्तेमाल करके बनाए गए हैं, तो ज्यादातर ब्राउजर उन्हें सही तरीके से नहीं दिखाते।
HTML कोड में पेज के मुख्य एलिमेंट्स होते हैं, लेकिन डिजाइन सेटिंग्स और दूसरी जटिल फंक्शनैलिटी आमतौर पर अलग से स्टोर की जाती हैं। इसलिए, अगर संबंधित एलिमेंट्स को HTML कोड में रेफरेंस के तौर पर शामिल नहीं किया गया है, तो कुछ एलिमेंट्स काम नहीं कर सकते या अलग दिख सकते हैं। उदाहरण के लिए, CSS और JS फाइलें।
अगर आपको समझ नहीं आ रहा कि target एट्रिब्यूट का इस्तेमाल कैसे करें, तो इसके बारे में यहां पढ़ें या कोड बनाने वाले व्यक्ति से संपर्क करें।

सीमाएं

HTML एलिमेंट में मौजूद कोड आपके क्लाइंट की साइट पर सैंडबॉक्स किए गए iFrame में दिखाई देता है। सैंडबॉक्स का इस्तेमाल करने से विजिटर्स कस्टम कोड के संभावित साइड इफेक्ट्स से सुरक्षित रहते हैं।

आमतौर पर, सैंडबॉक्स किया गया iFrame इन चीजों को ब्लॉक करता है:

ब्राउजर APIs का इस्तेमाल

प्लगइन का इस्तेमाल करने वाला कंटेंट (

,

सैंडबॉक्स	डिस्क्रिप्शन
allow-same-origin	थर्ड-पार्टी साइट की स्क्रिप्ट/कंटेंट को फिर से चालू करता है
allow-forms	फॉर्म सबमिशन को फिर से चालू करता है
allow-popups	पॉपअप्स को फिर से चालू करता है
allow-scripts	कस्टम JavaScript कोड को फिर से चालू करता है
allow-pointer-lock	कर्सर को फिर से कैप्चर करने की सुविधा देता है