लोड हो रहा है...

HTML iframes

YouTube पाठ ने होस्ट किए गए प्लेयर के लिए एक प्रसिद्ध iframe रेसिपी का उपयोग किया। यह सत्र सामान्य विचार पर लौटता है: एक इनलाइन फ्रेम आपकी पेज पर एक आयत के अंदर दूसरा HTML दस्तावेज़ दिखाता है — मैप, डॉक्स, डैशबोर्ड, हेल्प विजेट, या आपकी लिखी छोटी स्थानीय पेज। आप केवल वीडियो होस्ट तक सीमित नहीं हैं। आप एक नेस्टेड ब्राउज़िंग संदर्भ बना रहे हैं जिसकी अपनी URL, स्क्रॉल क्षेत्र और (अक्सर) अपने स्क्रिप्ट होते हैं। YouTube को इसी तत्व का एक विशेष मामला मानें, iframes के अस्तित्व का एकमात्र कारण नहीं।

iframe क्या करता है

एक iframe ब्राउज़र से दूसरा दस्तावेज़ लोड करने और उसे पैरेंट पेज के आरक्षित स्थान में खींचने को कहता है। विज़िटर अभी भी फ्रेम के आसपास आपके हेडिंग, पैराग्राफ और नेविगेशन देखते हैं, लेकिन फ्रेम के अंदर क्लिक, स्क्रॉलिंग, फॉर्म और स्क्रिप्ट आमतौर पर नेस्टेड पेज के होते हैं। यह उन डेमो और टूल के लिए शक्तिशाली है जिन्हें आप शुरू से नहीं बनाते — और महंगा अगर आप एक शुरुआती पेज पर बहुत सारे भारी थर्ड-पार्टी फ्रेम ढेर कर दें। मानसिक रूप से उस पैरेंट दस्तावेज़ को अलग रखें जो आप लिखते हैं, और उस चाइल्ड दस्तावेज़ को जो फ्रेम लोड करता है।

सीधा उत्तर

<iframe src="https://example.com/page" title="Description" width="600" height="400"></iframe> का उपयोग करें। src नेस्टेड पेज की URL है (रिमोट या रिलेटिव लोकल फ़ाइल)। title एक्सेसिबिलिटी के लिए फ्रेम का नाम देता है। Width और height लेआउट स्थान आरक्षित करते हैं ताकि नेस्टेड पेज दिखने पर आसपास की सामग्री न कूदे। हर साइट एम्बेड की अनुमति नहीं देती; कई हेडर भेजती हैं जो फ्रेम होने से इनकार करते हैं। जब पूरा एम्बेड ज़रूरी न हो, तो सामान्य लिंक अक्सर साफ़, हल्का और डीबग करने में आसान होता है।

एम्बेड करें या सिर्फ लिंक?

📊 शुरुआती कब एम्बेड करें बनाम लिंक

Situation	Prefer	Why
विज़िटर को नेस्टेड UI के साथ उसी जगह इंटरैक्ट करना हो	iframe	टूल आपकी पेज पर रहता है
विज़िटर को केवल संसाधन खोलना हो	सामान्य लिंक	हल्का, साफ़, कम फ्रेमिंग सरप्राइज़
टारगेट साइट फ्रेमिंग ब्लॉक करती हो	लिंक (या अपनी पेज होस्ट करें)	खाली फ्रेम समय बर्बाद करते हैं
आप छोटी लोकल हेल्पर पेज नियंत्रित करते हों	child.html पर iframe	थर्ड-पार्टी ब्लॉक के बिना सुरक्षित अभ्यास

बुनियादी रिमोट प्रीव्यू

एक सरल पैटर्न ऐसी सार्वजनिक पेज लोड करता है जो एम्बेड की अनुमति देती है (या ईमानदारी से विफल होती है यदि नहीं)। हमेशा एक अर्थपूर्ण title सेट करें।

Basic iframe

html

HTML Code

<iframe
src="https://example.com"
title="Example site preview"
width="600"
height="400">
</iframe>

बुनियादी सैंपल पढ़ना

src नेस्टेड दस्तावेज़ की URL की ओर इशारा करता है
title फ्रेम का एक्सेसिबिलिटी नाम है — आवश्यक आदत, सजावट नहीं
width और height स्थान आरक्षित करते हैं ताकि नेस्टेड पेज पेंट होने पर आसपास का टेक्स्ट बेतहाशा न कूदे
यदि फ्रेम खाली रहे, तो टारगेट एम्बेड ब्लॉक कर सकता है; यह अक्सर नीति है, टूटा iframe टैग या गलत फ़ोल्डर पथ नहीं
YouTube एम्बेड इसी तत्व का एक विशेष उपयोग हैं, Share → Embed से मिलने वाले एम्बेड URL आकार के साथ
खाली फ्रेम जल्दी एक उपयोगी पाठ सिखाते हैं: नियंत्रण वहीं समाप्त होता है जहाँ दूसरी साइट के नियम शुरू होते हैं

लोकल चाइल्ड पेज के साथ अभ्यास

विश्वसनीय अभ्यास के लिए, अपनी पैरेंट पेज के बगल में छोटा child.html बनाएँ और उसे फ्रेम करें। आप दोनों पक्ष नियंत्रित करते हैं, इसलिए विदेशी साइट फ्रेमिंग नहीं रोकती। थर्ड-पार्टी एम्बेड का पीछा करने से पहले तत्व सीखने का यह सबसे सुरक्षित तरीका है जो दिखाई देने से इनकार कर सकते हैं।

Local child iframe

html

HTML Code

<iframe
src="child.html"
title="Local practice page"
width="480"
height="240">
</iframe>

लोकल सैंपल पढ़ना

रिलेटिव src="child.html" पैरेंट के बगल वाली फ़ाइल लोड करता है (इमेज और स्क्रिप्ट जैसे ही पथ नियम)
child.html में एक छोटा हेडिंग और पैराग्राफ रखें ताकि सामग्री दिखे
चाइल्ड का टेक्स्ट बदलें, पैरेंट रिफ्रेश करें, और पुष्टि करें कि फ्रेम अपडेट होता है
यह पैटर्न थर्ड-पार्टी allow-list पर निर्भर किए बिना तत्व सिखाता है

YouTube एम्बेड बनाम सामान्य iframes

YouTube का Share → Embed डायलॉग उनके प्लेयर के लिए सही एम्बेड URL के साथ iframe भरने का एक निर्देशित तरीका है। सामान्य iframes उसी तत्व का उपयोग किसी भी अनुमत URL के लिए करते हैं: दस्तावेज़ व्यूअर, मैप, आपकी हेल्पर पेजें, और अधिक। YouTube पाठ की आदतें रखें (title, समझदार आकार, ज़रूरत पर आधिकारिक एम्बेड URL) और इस सत्र का व्यापक निर्णय जोड़ें: केवल तब एम्बेड करें जब उसी जगह इंटरैक्शन मायने रखे, और जब नहीं तो सामान्य लिंक पर लौटें। विशेष रेसिपी और सामान्य तत्व दोनों जानना मीडिया और लेआउट पाठों को आपके मन में टकराने से बचाता है।

शुरुआती स्तर पर सुरक्षा और प्रदर्शन

हर iframe एक और दस्तावेज़ लोड करने, अधिक स्क्रॉलिंग अड़चनें, और एक और जगह जोड़ता है जहाँ थर्ड-पार्टी स्क्रिप्ट चल सकती हैं। sandbox जैसे उन्नत एट्रिब्यूट नेस्टेड पेजों की अनुमतियाँ कसी कर सकते हैं — इसे बाद का विषय मानें जब आप आत्मविश्वास से एम्बेड और title कर सकें। अभी तीन शुरुआती नियम रखें: हर पैराग्राफ के ऊपर कई भारी iframes न ढेर करें; जब बाहर जाना पर्याप्त हो तो लिंक पसंद करें; और कभी न मानें कि खाली फ्रेम का मतलब आपके HTML टैग टूटे हैं जब टारगेट सिर्फ फ्रेमिंग से इनकार करता है। «क्या यह एम्बेड अपना वजन कमाता है?» पूछना स्पष्ट पेज लिखने का हिस्सा है।

एक्सेसिबिलिटी आदतें

हर iframe को स्पष्ट title दें जो नेस्टेड सामग्री का वर्णन करे («कोर्स मैप», «लोकल अभ्यास पेज»), «frame1» या खाली स्ट्रिंग नहीं। एम्बेड को एक छोटे वाक्य से परिचय दें ताकि कीबोर्ड और स्क्रीन-रीडर उपयोगकर्ता फ्रेम क्षेत्र में पहुँचने से पहले जानें कि यह क्यों है। यदि नेस्टेड पेज आवश्यक शिक्षण सामग्री है, तो उसे पूर्ण-पेज खोलने के लिए सामान्य लिंक भी दें। फ्रेम की एक्सेसिबिलिटी नामकरण और संदर्भ के बारे में है, यह दिखावा नहीं कि पैरेंट और चाइल्ड एक ही दस्तावेज़ हैं।

अपने एडिटर में अभ्यास

हेडिंग और एक अभ्यास पैराग्राफ के साथ child.html बनाएँ।
पैरेंट पेज पर iframe, स्पष्ट title, और मध्यम width/height से एम्बेड करें।
पैरेंट स्थानीय रूप से खोलें और पुष्टि करें कि चाइल्ड सामग्री आयत के अंदर दिखती है।
वैकल्पिक रूप से रिमोट URL आज़माएँ; यदि खाली रहे, तो लोकल चाइल्ड पर लौटें और नोट करें कि नीति — गायब टैग नहीं — कारण हो सकती है।
उसी चाइल्ड URL का सामान्य लिंक जोड़ें और फ्रेम वाले अनुभव से तुलना करें।
फ्रेम के ऊपर एक वाक्य लिखें कि विज़िटर क्या देखेंगे, फिर जाँचें कि title अभी भी उस वर्णन से मेल खाता है।

आसान गलतियाँ

iframe पर title न होना
मान लेना कि हर बाहरी साइट आपके फ्रेम में लोड होगी
एक पेज पर कई भारी iframes नेस्ट करना
«मैंने पैराग्राफ में URL लिंक किया» को «मैंने फ्रेम एम्बेड किया» से भ्रमित करना
ब्लॉक हुए रिमोट एम्बेड को टूटा src पथ मानना जब कारण नीति हो
भूलना कि YouTube एम्बेड केवल एक iframe रेसिपी हैं, पूरा तत्व नहीं

सारांश

iframe src के माध्यम से दूसरी पेज (या संगत दस्तावेज़) एम्बेड करता है
हमेशा स्पष्ट title शामिल करें
टारगेट साइट एम्बेड ब्लॉक कर सकती है
जब उसी जगह इंटरैक्शन ज़रूरी न हो तो सामान्य लिंक पसंद करें
थर्ड-पार्टी पेजों पर निर्भर होने से पहले लोकल child.html से सुरक्षित अभ्यास करें

🧠 अपने ज्ञान की परीक्षा करें

शुरू करने के लिए तैयार

अपने ज्ञान की परीक्षा करें

इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं

❓

प्रश्न

🎯

70%

पास करने के लिए

♾️

∞

समय

🔄

∞

प्रयास

📝 निर्देश

हर प्रश्न को ध्यान से पढ़ें
हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
आपकी प्रगति शीर्ष पर दिखाई जाएगी

भाषा