आईफ्रेम क्या है?

iFrame, या इनलाइन फ़्रेम, एक HTML तत्व है जो आपको वर्तमान वेब पेज के भीतर एक अन्य HTML दस्तावेज़ एम्बेड करने की अनुमति देता है।

आईफ्रेम क्या है?

iFrame, इनलाइन फ़्रेम का संक्षिप्त रूप है, एक एचटीएमएल तत्व जो किसी बाहरी HTML दस्तावेज़ को किसी अन्य HTML दस्तावेज़ की सीमाओं के भीतर एम्बेड करने में सक्षम बनाता है। अनिवार्य रूप से, यह एक विंडो के रूप में कार्य करता है जो किसी भिन्न वेब पेज या संसाधन से सामग्री प्रदर्शित कर सकता है, जबकि यह वर्तमान वेबपेज का हिस्सा बना रहता है। iFrames का व्यापक रूप से विभिन्न उद्देश्यों के लिए उपयोग किया जाता है, जैसे कि वीडियो, इंटरैक्टिव मानचित्र, विज्ञापन या अन्य गतिशील सामग्री को वेबसाइट में एकीकृत करना, बिना उपयोगकर्ताओं को वह पृष्ठ छोड़ने की आवश्यकता के जिसे वे देख रहे हैं।

iFrame कैसे काम करता है?

iFrame मौजूदा वेबपेज में बाहरी HTML दस्तावेज़ या अन्य वेब सामग्री एम्बेड करता है। यह प्रक्रिया कैसे काम करती है, इसका चरण-दर-चरण विवरण यहां दिया गया है:

1. iFrame तत्व सम्मिलित करना. यह प्रक्रिया डेवलपर द्वारा एक नया एप्लिकेशन जोड़ने से शुरू होती है। टैग को वेब पेज के HTML में जोड़ें। इस टैग में src जैसे गुण शामिल हैं, जो निर्दिष्ट करता है यूआरएल एम्बेड की जाने वाली बाह्य सामग्री की संरचना, तथा अन्य वैकल्पिक विशेषताएँ जैसे चौड़ाई, ऊँचाई, फ्रेमबॉर्डर, तथा फुलस्क्रीन की अनुमति, iFrame के स्वरूप और व्यवहार को नियंत्रित करती हैं।
2. बाहरी इरादे का अनुरोध. एक बार उपयोगकर्ता के ब्राउज़र iFrame युक्त वेबपृष्ठ लोड होने पर, ब्राउज़र src विशेषता को पढ़ता है टैग और एक अलग बनाता है HTTP सामग्री को पुनः प्राप्त करने के लिए निर्दिष्ट URL पर अनुरोध करें।
3. बाह्य सामग्री लोड हो रही है. ब्राउज़र बाहरी सामग्री लाता है, जो एक संपूर्ण HTML दस्तावेज़, एक मीडिया फ़ाइल या कोई भी वेब संसाधन हो सकता है। सामग्री को मुख्य वेबपेज के भीतर एक स्वतंत्र दस्तावेज़ के रूप में माना जाता है। iFrame मूल रूप से पैरेंट वेबपेज के अंदर एक मिनी ब्राउज़र विंडो बनाता है, जो सामग्री को लोड और रेंडर करता है जैसे कि यह एक स्टैंडअलोन वेब पेज हो।
4. सामग्री प्रस्तुत करना. ब्राउज़र फिर iFrame की सीमाओं के अंदर की सामग्री प्रदर्शित करता है। एम्बेडेड सामग्री ऐसी दिखाई देती है मानो वह मुख्य वेबपेज का हिस्सा हो, लेकिन यह स्वतंत्र रूप से संचालित होती है। मूल पृष्ठ और iFrame सामग्री सीधे तौर पर परस्पर क्रिया नहीं करते हैं, हालाँकि वे एक ही दृश्य स्थान साझा करते हैं।
5. अंतःक्रिया और कार्यक्षमता. उपयोगकर्ता iFrame के अंदर की सामग्री के साथ उसी तरह से इंटरैक्ट करते हैं जैसे वे किसी भी वेब पेज के साथ करते हैं। उदाहरण के लिए, यदि iFrame में कोई फ़ॉर्म है, तो उपयोगकर्ता उसे भरकर सबमिट कर सकते हैं। एम्बेड की गई सामग्री में उसका अपना शामिल हो सकता है जावास्क्रिप्ट, सीएसएस, और अन्य संसाधन, iFrame संदर्भ में, मूल पृष्ठ से अलग निष्पादित होते हैं।
6. स्वतंत्र दस्तावेज़ जीवनचक्र. iFrame के अंदर एंबेडेड कंटेंट का अपना डॉक्यूमेंट लाइफ़साइकिल होता है। इसका मतलब है कि यह लोड होता है, निष्पादित होता है लिपियों, और पैरेंट पेज से स्वतंत्र रूप से अपने संसाधनों के साथ इंटरैक्ट करता है। उदाहरण के लिए, यदि पैरेंट पेज को फिर से लोड किया जाता है, तो iFrame सामग्री भी फिर से लोड हो जाएगी, लेकिन इसकी स्थिति और व्यवहार को मुख्य दस्तावेज़ से अलग से प्रबंधित किया जाता है।
7. सुरक्षा और प्रतिबंध। संभावित सुरक्षा जोखिमों के कारण, ब्राउज़र iFrame सामग्री पर विभिन्न प्रतिबंध लागू करते हैं। उदाहरण के लिए, क्रॉस-ओरिजिन नीतियाँ पैरेंट पेज में स्क्रिप्ट को किसी भिन्न iFrame से अंदर की सामग्री तक पहुँचने से रोकती हैं। डोमेनइसके अतिरिक्त, डेवलपर्स सुरक्षा हेडर और विशेषताओं का उपयोग करते हैं जैसे सैंडबॉक्स iFrame सामग्री क्या कर सकती है, इसे और सीमित करने के लिए, जैसे स्क्रिप्ट को अक्षम करना या फ़ॉर्म सबमिशन को रोकना।

iFrame की विशेषताएँ

HTML में तत्व में कई विशेषताएँ होती हैं जो इसके व्यवहार, उपस्थिति और प्रदर्शित सामग्री के साथ बातचीत को नियंत्रित करती हैं। यहाँ मुख्य विशेषताओं का विस्तृत विवरण दिया गया है:

• स्रोत. यह विशेषता iFrame में एम्बेड की जाने वाली बाहरी सामग्री का URL निर्दिष्ट करती है। यह सबसे आवश्यक विशेषता है क्योंकि यह निर्धारित करती है कि iFrame में कौन सी सामग्री लोड की जाएगी। उदाहरण के लिए, "https://www.example.com" से सामग्री को iFrame में एम्बेड करेगा.
• चौड़ाई और ऊंचाई. ये विशेषताएँ पिक्सेल या प्रतिशत में iFrame के आकार को नियंत्रित करती हैं। उदाहरण के लिए, एक iFrame बनाएगा जो 600 पिक्सेल चौड़ा और 400 पिक्सेल लंबा होगा।
• ढांचा सीमा। यह विशेषता निर्दिष्ट करती है कि iFrame में बॉर्डर होना चाहिए या नहीं। मान 0 का अर्थ है कोई बॉर्डर नहीं, जबकि 1 का अर्थ है दृश्यमान बॉर्डर। यह विशेषता अब अप्रचलित मानी जाती है, क्योंकि आधुनिक CSS iFrame बॉर्डर को स्टाइल करने का पसंदीदा तरीका है।
• स्क्रॉल करना यह विशेषता iFrame के भीतर स्क्रॉलबार की दृश्यता को नियंत्रित करती है। यह तीन मान ले सकता है: हाँ, नहीं, या ऑटो। हाँ स्क्रॉलबार को प्रकट होने के लिए बाध्य करता है, नहीं उन्हें रोकता है, और ऑटो स्क्रॉलबार को केवल तभी प्रकट होने देता है जब ज़रूरत हो। उदाहरण के लिए, यह स्क्रॉलबार को प्रदर्शित होने से रोकेगा, भले ही सामग्री iFrame से बड़ी हो।
• सैंडबॉक्स. यह शक्तिशाली विशेषता सुरक्षा बढ़ाने के लिए iFrame के भीतर सामग्री पर अतिरिक्त प्रतिबंधों का एक सेट सक्षम करती है। इसका उपयोग स्क्रिप्ट को अक्षम करने, फ़ॉर्म सबमिशन को रोकने, प्लगइन्स के उपयोग को अवरुद्ध करने और अन्य संभावित जोखिमपूर्ण व्यवहारों को प्रतिबंधित करने के लिए किया जा सकता है। इस विशेषता का मान प्रतिबंधों की एक स्पेस-सेपरेटेड सूची हो सकती है, जैसे कि allow-scripts, allow-forms, allow-same-origin, आदि। उदाहरण के लिए, यह स्क्रिप्ट को iFrame के भीतर चलाने की अनुमति देगा, लेकिन अन्य प्रतिबंधों के साथ।
• अनुमति। अनुमति विशेषता iFrame में सामग्री के लिए एक सुविधा नीति निर्दिष्ट करती है। यह कैमरा एक्सेस, जियोलोकेशन, फ़ुलस्क्रीन मोड और बहुत कुछ जैसी चीज़ों के लिए अनुमतियों को नियंत्रित करता है। यह iFrame के अंदर की सामग्री को कुछ ब्राउज़र सुविधाएँ स्पष्ट रूप से देने या अस्वीकार करने का एक तरीका है। उदाहरण के लिए, यह सामग्री को केवल उसी मूल के लिए भौगोलिक स्थान तक पहुंचने की अनुमति देता है और कैमरा पहुंच को पूरी तरह से अक्षम कर देता है।
• नाम. यह विशेषता iFrame को एक नाम प्रदान करती है, जो लिंक या स्क्रिप्ट के साथ इसे लक्षित करने के लिए उपयोगी हो सकती है। उदाहरण के लिए, target="iframe_name" वाला लिंक नामित iFrame के भीतर लिंक की गई सामग्री को खोलेगा। यह उन स्थितियों में विशेष रूप से उपयोगी है जहाँ एक पृष्ठ पर कई iFrames मौजूद हैं।
• srcdoc. यह विशेषता आपको HTML सामग्री को किसी बाहरी स्रोत से लोड करने के बजाय सीधे iFrame में एम्बेड करने की अनुमति देती है। यह अलग फ़ाइल की आवश्यकता के बिना HTML सामग्री के छोटे टुकड़ों को एम्बेड करने के लिए उपयोगी है। उदाहरण के लिए, Hello, world!"> iFrame के अंदर "Hello, world!" प्रदर्शित होगा।
• रेफरर नीति. यह विशेषता src URL प्राप्त करते समय भेजी जाने वाली रेफ़रर जानकारी की मात्रा को नियंत्रित करती है। यह रेफ़रर डेटा से संबंधित गोपनीयता और सुरक्षा चिंताओं को प्रबंधित करने में मदद करता है। मान no-referrer, origin, strict-origin आदि हो सकते हैं, जो यह निर्धारित करते हैं कि मूल पृष्ठ का कितना URL एम्बेड की गई सामग्री के साथ साझा किया जाता है।
• लोड हो रहा है। लोडिंग विशेषता यह निर्दिष्ट करती है कि iFrame को तुरंत लोड किया जाना चाहिए या विलंबित। मान उत्सुक हो सकते हैं, जो iFrame को यथाशीघ्र लोड करता है, या आलसी, जो iFrame के व्यूपोर्ट के निकट होने तक लोडिंग को स्थगित करता है, जिससे प्रारंभिक लोड समय कम करके प्रदर्शन और उपयोगकर्ता अनुभव में सुधार होता है।
• रेफरर नीति. यह विशेषता iframe द्वारा किए गए अनुरोधों के लिए रेफ़रर नीति निर्धारित करती है, जो iframe की सामग्री को भेजे जाने वाले रेफ़रिंग पृष्ठ के बारे में जानकारी की मात्रा को प्रभावित करती है। विकल्पों में नो-रेफ़रर, मूल, समान-मूल और सख्त-मूल शामिल हैं।
• सीएसपी. csp (सामग्री सुरक्षा नीति) विशेषता डेवलपर को iFrame में सामग्री के लिए विशेष रूप से सामग्री सुरक्षा नीति निर्दिष्ट करने की अनुमति देती है। यह कुछ सुरक्षा उपायों को लागू करता है, जैसे कि सामग्री के किन स्रोतों को लोड करने की अनुमति है, जो क्रॉस-साइट स्क्रिप्टिंग (XSS) जैसे कुछ प्रकार के हमलों को रोक सकता है।

iFrames का उपयोग किस लिए किया जाता है?

वेब डेवलपमेंट में iFrames का उपयोग विभिन्न उद्देश्यों के लिए किया जाता है, मुख्य रूप से वेब पेज के भीतर बाहरी सामग्री को एम्बेड करने के लिए, जबकि उस सामग्री के लिए एक अलग संदर्भ बनाए रखा जाता है। यहाँ कुछ सामान्य उपयोग के मामले दिए गए हैं:

• वीडियो एम्बेड करना. iFrames का इस्तेमाल YouTube, Vimeo या अन्य वीडियो होस्टिंग सेवाओं जैसे प्लैटफ़ॉर्म से वीडियो एम्बेड करने के लिए व्यापक रूप से किया जाता है। यह उपयोगकर्ताओं को पेज से दूर जाए बिना सीधे वेबसाइट पर वीडियो देखने की अनुमति देता है। एम्बेडेड वीडियो प्लेयर, नियंत्रणों के साथ, iFrame के भीतर लोड किया जाता है।
• मानचित्रों को एकीकृत करना. iFrames का इस्तेमाल अक्सर Google Maps या OpenStreetMap जैसी सेवाओं से इंटरैक्टिव मैप्स को एम्बेड करने के लिए किया जाता है। यह उपयोगकर्ताओं को सीधे वेबपेज पर मैप्स को देखने और उनसे इंटरैक्ट करने की क्षमता प्रदान करता है, जो विशेष रूप से स्थानों, दिशाओं और अन्य भौगोलिक डेटा को प्रदर्शित करने के लिए उपयोगी है।
• बाह्य वेबपृष्ठ या दस्तावेज़ प्रदर्शित करना. iFrames अन्य वेबसाइटों से संपूर्ण वेब पेज या दस्तावेज़ों को शामिल करने की अनुमति देते हैं। इसका उपयोग आम तौर पर सेवा की शर्तों, गोपनीयता नीतियों या अन्य बाहरी दस्तावेज़ों जैसी सामग्री को प्रदर्शित करने के लिए किया जाता है, जिसके लिए उपयोगकर्ताओं को वर्तमान साइट छोड़ने की आवश्यकता नहीं होती है।
• तृतीय-पक्ष विजेट और प्लगइन लोड करना. कई तृतीय-पक्ष सेवाएँ, जैसे कि सोशल मीडिया प्लेटफ़ॉर्म, ग्राहक सहायता चैट टूल और विज्ञापन नेटवर्क, ऐसे विजेट प्रदान करते हैं जिन्हें iFrames का उपयोग करके एम्बेड किया जा सकता है। यह वेबसाइटों को व्यापक उपयोग के बिना Facebook टिप्पणियाँ, X फ़ीड या लाइव चैट समर्थन जैसी कार्यक्षमताओं को एकीकृत करने की अनुमति देता है विकास का समर्थन करें.
• विज्ञापन होस्टिंग. iFrames का इस्तेमाल आम तौर पर वेब पेजों पर विज्ञापन एम्बेड करने के लिए किया जाता है। विज्ञापन नेटवर्क अक्सर iFrame-आधारित विज्ञापन टैग प्रदान करते हैं, जो विज्ञापन के कोड और पेज के कोड के बीच टकराव को रोकने के लिए विज्ञापन सामग्री को बाकी पेज से अलग करने में मदद करते हैं।
• सुरक्षा कारणों से सामग्री को अलग करना। iFrames का उपयोग बाहरी स्रोतों से सामग्री को एम्बेड करने के लिए किया जा सकता है, जबकि इसे मूल पृष्ठ की स्क्रिप्ट और शैलियों से अलग रखा जा सकता है। यह सुरक्षा सीमाओं को बनाए रखने के लिए विशेष रूप से उपयोगी है, क्योंकि यह संभावित रूप से असुरक्षित सामग्री को मुख्य पृष्ठ को प्रभावित करने से रोकता है।
• सामग्री का परीक्षण और पूर्वावलोकन. डेवलपर्स अक्सर किसी प्रोग्राम की सामग्री का परीक्षण या पूर्वावलोकन करने के लिए iFrames का उपयोग करते हैं। विकास पर्यावरण लाइव साइट पर। इससे साइट में सामग्री को पूरी तरह से एकीकृत किए बिना आसान तुलना और परीक्षण की सुविधा मिलती है।
• उत्तरदायी सामग्री प्रदर्शित करना. iFrames का उपयोग रिस्पॉन्सिव कंटेंट को प्रदर्शित करने के लिए किया जा सकता है जो अलग-अलग स्क्रीन साइज़, जैसे कि रिस्पॉन्सिव वेब पेज या एप्लिकेशन के हिसाब से एडजस्ट हो जाता है। यह सुनिश्चित करने के लिए उपयोगी है कि एम्बेड की गई सामग्री सभी डिवाइस पर सुलभ और विज़ुअली एकसमान हो।
• फॉर्म और इंटरैक्टिव उपकरण एम्बेड करना। iFrames का उपयोग बाहरी स्रोतों से फ़ॉर्म, सर्वेक्षण, कैलकुलेटर और अन्य इंटरैक्टिव टूल एम्बेड करने के लिए किया जाता है। यह वेबसाइटों को इन टूल को स्क्रैच से विकसित किए बिना जटिल कार्यक्षमता प्रदान करने में सक्षम बनाता है।
• क्रॉस-डोमेन एम्बेडिंग. जब किसी भिन्न डोमेन से सामग्री एम्बेड करने की आवश्यकता होती है, तो iFrames मूल संदर्भों के पृथक्करण को बनाए रखते हुए ऐसा करने का एक तरीका प्रदान करता है। यह विशेष रूप से उस सामग्री के लिए उपयोगी है जो किसी भिन्न डोमेन पर होस्ट की जाती है server या डोमेन, जिससे प्रबंधन और तैनाती आसान हो जाती है।

iFrame उदाहरण

यहां iFrames के उपयोग के दो उदाहरण दिए गए हैं।

उदाहरण 1: YouTube वीडियो एम्बेड करना

यह उदाहरण दर्शाता है कि iFrame का उपयोग करके किसी वेबपेज में YouTube वीडियो को कैसे एम्बेड किया जाए।

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>iFrame YouTube Example</title>

</head>

<body>

    <h1>Watch this Video:</h1>

    <iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ"

    title="YouTube video player" frameborder="0" allow="accelerometer; autoplay;

    clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>

    </iframe>

</body>

</html>

स्पष्टीकरण:

• src विशेषता YouTube वीडियो के URL पर सेट की गई है। इस मामले में, यह एक उदाहरण वीडियो है।
• चौड़ाई और ऊंचाई विशेषताएँ वीडियो प्लेयर का आकार निर्धारित करती हैं।
• अनुमति विशेषता ऑटोप्ले जैसी सुविधाओं के लिए अनुमतियाँ निर्दिष्ट करती है, एन्क्रिप्टेड मीडिया, और पूर्णस्क्रीन.
• allowfullscreen विशेषता वीडियो को पूर्णस्क्रीन मोड में देखने की अनुमति देती है।

उदाहरण 2: Google मानचित्र एम्बेड करना

यह उदाहरण दिखाता है कि iFrame का उपयोग करके किसी वेबपेज में Google मानचित्र को कैसे एम्बेड किया जाए।

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>iFrame Google Map Example</title>

</head>

<body>

    <h1>Our Location:</h1>

    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3151.8354345096274!

    2d144.95373631531565!3d-37.81720997975142!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!

    1s0x6ad65d43f1a5d53b%3A0x1aaf3d5a5b64db5e!2sFederation%20Square!5e0!3m2!1sen!2sau!4v1617174192722!5m2!

    1sen!2sau"

    width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>

</body>

</html>

स्पष्टीकरण:

• src विशेषता में मानचित्र एम्बेड करने के लिए Google मानचित्र द्वारा प्रदान किया गया URL शामिल होता है। URL में विशिष्ट पैरामीटर शामिल होते हैं जो स्थान और दृश्य सेटिंग निर्धारित करते हैं।
• चौड़ाई और ऊंचाई विशेषताएँ वेबपेज पर मानचित्र का आकार निर्धारित करती हैं।
• style="border:0;" भाग मानचित्र के चारों ओर की सीमाओं को हटा देता है।
• allowfullscreen विशेषता उपयोगकर्ताओं को मानचित्र को पूर्णस्क्रीन मोड में देखने की अनुमति देती है।
• लोडिंग="आलसी" विशेषता मानचित्र के लोड होने को तब तक स्थगित रखती है जब तक कि वह व्यूपोर्ट के पास न आ जाए, जिससे पृष्ठ लोड प्रदर्शन में सुधार होता है।

iFrames का उपयोग कैसे करें?

निम्नलिखित अनुच्छेदों में बताया गया है कि अपने उपयोगकर्ता अनुभव से अधिकतम लाभ प्राप्त करने के लिए iFrames का उपयोग कैसे करें।

बाह्य सामग्री एम्बेड करें

वेबपेज में बाहरी सामग्री एम्बेड करने के लिए, डेवलपर्स आमतौर पर इसका उपयोग करते हैं HTML तत्व, जो उन्हें वीडियो, मानचित्र, या अन्य डोमेन से संपूर्ण वेब पेज जैसे संसाधनों को सीधे अपनी साइट में शामिल करने की अनुमति देता है। इस प्रक्रिया में src विशेषता के माध्यम से सामग्री के स्रोत को निर्दिष्ट करना शामिल है टैग, जो बाहरी सामग्री के URL की ओर इशारा करता है। चौड़ाई, ऊंचाई और अनुमति जैसी अतिरिक्त विशेषताओं का उपयोग एम्बेडेड सामग्री की उपस्थिति और व्यवहार को नियंत्रित करने के लिए किया जा सकता है, यह सुनिश्चित करते हुए कि यह पृष्ठ के डिज़ाइन में सहज रूप से फिट बैठता है।

इस तरह से बाह्य सामग्री एम्बेड करके, डेवलपर्स अपने वेब पेजों की कार्यक्षमता और अन्तरक्रियाशीलता को बढ़ाते हैं, जिससे उपयोगकर्ताओं को साइट छोड़े बिना ही बेहतर अनुभव प्राप्त होता है।

सामग्री को गतिशील रूप से लोड करें

iFrame में गतिशील रूप से सामग्री लोड करने के लिए उपयोगकर्ता इंटरैक्शन या बटन या लिंक जैसे अन्य ट्रिगर्स के जवाब में iFrame के स्रोत (src) को बदलना शामिल है। इसे उपयोग करके प्राप्त किया जा सकता है जावास्क्रिप्ट, जहां आप पूर्ण पृष्ठ पुनः लोड किए बिना नई सामग्री लोड करने के लिए iFrame की src विशेषता में हेरफेर कर सकते हैं।

उदाहरण के लिए, जब कोई उपयोगकर्ता किसी बटन पर क्लिक करता है, तो एक जावास्क्रिप्ट फ़ंक्शन निष्पादित किया जा सकता है जो iFrame की src विशेषता को अपडेट करता है, जिससे यह एक नया HTML दस्तावेज़ या वेब संसाधन प्राप्त करता है और प्रदर्शित करता है। यह दृष्टिकोण विशेष रूप से गतिशील वेब बनाने के लिए उपयोगी है अनुप्रयोगों जहां उपयोगकर्ता की गतिविधियों के आधार पर पृष्ठ के एक ही क्षेत्र में अलग-अलग सामग्री प्रदर्शित करने की आवश्यकता होती है, जिससे विभिन्न सामग्री के बीच निर्बाध संक्रमण प्रदान करके उपयोगकर्ता अनुभव को बढ़ाया जा सके।

इसके अतिरिक्त, history.pushState का लाभ उठाकर API गतिशील iFrame सामग्री के साथ संयोजन में, ब्राउज़र इतिहास को बनाए रखना संभव है, जिससे उपयोगकर्ताओं को गतिशील रूप से लोड की गई सामग्री के माध्यम से आगे और पीछे नेविगेट करने की अनुमति मिलती है, जैसे कि वे पारंपरिक पेज लोड थे।

इनलाइन फ़्रेम बनाना

इनलाइन फ़्रेम बनाना, जिसे आमतौर पर iFrames के रूप में जाना जाता है, इसमें निम्न का उपयोग करना शामिल है: HTML तत्व बाहरी सामग्री को सीधे वेबपेज में एम्बेड करने के लिए। यह तत्व बहुमुखी है, जिससे डेवलपर्स वीडियो और मानचित्रों से लेकर पूरे वेब पेज या इंटरैक्टिव विजेट तक कुछ भी मौजूदा सामग्री में डाल सकते हैं। src विशेषता निर्दिष्ट करके, आप एम्बेड की जाने वाली सामग्री का URL परिभाषित करते हैं, जबकि चौड़ाई, ऊँचाई और फ़्रेमबॉर्डर जैसी अन्य विशेषताएँ iFrame की उपस्थिति और व्यवहार को नियंत्रित करती हैं।

iFrames तीसरे पक्ष की सामग्री को सहजता से एकीकृत करने के लिए विशेष रूप से उपयोगी हैं, जिससे उपयोगकर्ता मुख्य साइट को छोड़े बिना बाहरी संसाधनों के साथ बातचीत कर सकते हैं। सैंडबॉक्स और अनुमति जैसी अतिरिक्त विशेषताओं के साथ, डेवलपर्स सुरक्षा और कार्यक्षमता को ठीक कर सकते हैं, यह सुनिश्चित करते हुए कि एम्बेडेड सामग्री वेबसाइट की समग्र अखंडता और प्रदर्शन को बनाए रखते हुए इच्छित तरीके से व्यवहार करती है।

iFrames सर्वोत्तम अभ्यास

वेब डेवलपमेंट में iFrames का उपयोग करते समय, यह सुनिश्चित करने के लिए सर्वोत्तम प्रथाओं का पालन करना आवश्यक है कि वे सही ढंग से काम करें, सुरक्षा बनाए रखें और एक अच्छा उपयोगकर्ता अनुभव प्रदान करें। यहाँ iFrames का उपयोग करने के लिए कुछ सर्वोत्तम अभ्यास दिए गए हैं:

• सुरक्षा के लिए सैंडबॉक्स विशेषता का उपयोग करें. सैंडबॉक्स विशेषता iFrame के भीतर सामग्री पर प्रतिबंध लगाकर सुरक्षा को बढ़ाती है। डिफ़ॉल्ट रूप से, iFrames क्रॉस-साइट स्क्रिप्टिंग (XSS) जैसे सुरक्षा जोखिम पेश कर सकते हैं। सैंडबॉक्स का उपयोग करने से एम्बेडेड सामग्री द्वारा की जाने वाली क्रियाएँ सीमित हो जाती हैं, जैसे स्क्रिप्ट चलाना, फ़ॉर्म सबमिट करना या ब्राउज़र स्टोरेज तक पहुँचना। आप अतिरिक्त अनुमति मान निर्दिष्ट करके स्क्रिप्ट या फ़ॉर्म जैसी कुछ सुविधाओं को चुनिंदा रूप से अनुमति दे सकते हैं।

<iframe src="https://example.com" sandbox="allow-scripts"></iframe>

• पहुँच-योग्यता के लिए शीर्षक विशेषता निर्दिष्ट करें. अपने iFrame में वर्णनात्मक शीर्षक विशेषता जोड़ने से पहुँच क्षमता में सुधार होता है, खास तौर पर स्क्रीन रीडर पर निर्भर रहने वाले उपयोगकर्ताओं के लिए। शीर्षक विशेषता सामग्री का संक्षिप्त विवरण प्रदान करती है, जिससे उपयोगकर्ताओं को यह समझने में मदद मिलती है कि एम्बेड की गई सामग्री क्या है।

<iframe src="https://example.com" title="Interactive map of our location"></iframe>

• उत्तरदायी डिज़ाइन सुनिश्चित करें. iFrames कभी-कभी वेबपेज की प्रतिक्रियाशीलता को बाधित कर सकते हैं, खासकर छोटी स्क्रीन पर। यह सुनिश्चित करने के लिए कि iFrame सामग्री विभिन्न डिवाइस पर सही ढंग से स्केल हो, iFrame को प्रतिक्रियाशील बनाने के लिए CSS का उपयोग करें। आप चौड़ाई और ऊंचाई को प्रतिशत में सेट करके या व्यूपोर्ट इकाइयों का उपयोग करके, अधिकतम-चौड़ाई और अधिकतम-ऊंचाई बाधाओं के साथ इसे प्राप्त कर सकते हैं।

iframe {

    width: 100%;

    height: auto;

    max-width: 600px;

    max-height: 400px;

}

• iFrames का अत्यधिक उपयोग करने से बचें. हालाँकि iFrames उपयोगी हैं, लेकिन इनके अत्यधिक उपयोग से पेज लोड होने में देरी, सुरक्षा जोखिम और खराब उपयोगकर्ता अनुभव होता है। जब भी संभव हो, कई iFrames पर निर्भर रहने के बजाय API का उपयोग करने या सीधे पेज में सामग्री एम्बेड करने जैसे वैकल्पिक तरीकों पर विचार करें।
• रेफ़रर नीति निर्धारित करें. रेफररपॉलिसी विशेषता iFrame सामग्री लोड होने पर भेजी जाने वाली रेफरर जानकारी की मात्रा को नियंत्रित करती है। यह उपयोगकर्ता की गोपनीयता की रक्षा करने और संवेदनशील जानकारी को एम्बेडेड सामग्री के साथ साझा होने से रोकने में मदद कर सकता है। सामान्य मानों में नो-रेफ़रर, मूल, या सख्त-मूल-जब-क्रॉस-मूल शामिल हैं।

<iframe src="https://example.com" referrerpolicy="no-referrer"></iframe>

• प्रदर्शन सुधारने के लिए लोडिंग विशेषता का उपयोग करें. लोडिंग विशेषता ऑफस्क्रीन iFrames की लोडिंग को तब तक स्थगित करके पृष्ठ प्रदर्शन को अनुकूलित करने में मदद करती है जब तक कि उनकी आवश्यकता न हो (यानी, जब वे व्यूपोर्ट के पास हों)। आलसी मान लोडिंग में देरी करता है, जबकि उत्सुक मूल्य iFrame को तुरंत लोड करता है।

<iframe src="https://example.com" loading="lazy"></iframe>

• उचित अनुमतियाँ निर्धारित करें. अनुमति विशेषता निर्दिष्ट करती है कि iFrame सामग्री को किन सुविधाओं का उपयोग करने की अनुमति है, जैसे कि जियोलोकेशन, कैमरा एक्सेस या ऑटोप्ले। सटीक अनुमतियाँ सेट करने से एम्बेडेड सामग्री की क्षमताएँ सीमित हो जाती हैं, जिससे सुरक्षा और उपयोगकर्ता की गोपनीयता बढ़ जाती है।

<iframe src="https://example.com" allow="geolocation; microphone; camera"></iframe>

• क्रॉस-ओरिजिन नीतियों पर विचार करें। अलग-अलग डोमेन से कंटेंट लोड करने वाले iFrames सुरक्षा संबंधी चुनौतियां पेश कर सकते हैं। क्रॉस-ओरिजिन रिसोर्स शेयरिंग (CORS) नीतियों को लागू करें server iFrame सामग्री को होस्ट करना और X-Frame-Options या Content-Security-Policy (CSP) हेडर का उपयोग करके नियंत्रित करें कि कौन सी साइटें आपकी सामग्री को iFrame में एम्बेड कर सकती हैं। यह क्लिकजैकिंग और अन्य सुरक्षा शोषण को रोकने में मदद करता है।
• फ़ॉलबैक सामग्री प्रदान करें. यदि iFrame लोड होने में विफल हो जाता है या अवरुद्ध हो जाता है, तो इसके भीतर फ़ॉलबैक सामग्री प्रदान करने पर विचार करें टैग। यदि iFrame लोड नहीं हो पाता है तो यह सामग्री प्रदर्शित की जाएगी, जिससे बेहतर उपयोगकर्ता अनुभव मिलेगा।

<iframe src="https://example.com">

    <p>Your browser does not support iFrames. Please visit <a href="https://example.com">this link</a> instead.</p>

</iframe>

प्रदर्शन प्रभाव की निगरानी करें. iFrames पेज के प्रदर्शन को धीमा कर सकते हैं, खासकर अगर उनमें वीडियो या इंटरैक्टिव तत्व जैसी भारी सामग्री शामिल हो। अपने पेज के लोड समय पर iFrames के प्रभाव की नियमित रूप से निगरानी करें और उन iFrames को ऑप्टिमाइज़ या लेज़ी-लोड करें जो उपयोगकर्ता को तुरंत दिखाई नहीं देते हैं।