HTML Iframes
In this page:
<iframe src="url" title="Description" width="width" height="height"></iframe>Iframe क्या है?
एक iframe ('inline frame' का छोटा रूप) आपके मौजूदा webpage के अंदर किसी दूसरे HTML document को embed करने के लिए इस्तेमाल होता है। src attribute browser को उस बाहरी page का web address बताता है जिसे आप दिखाना चाहते हैं।
- दूसरी services से maps या video players जैसे interactive widgets embed करने के लिए iframes का इस्तेमाल करें।
- Accepted attributes:
- src — embed करने वाले page का URL
- srcdoc — render करने के लिए inline HTML
- title — frame का accessible description
- width / height — pixel dimensions
- name — links के लिए target name
- allow, sandbox, loading, referrerpolicy — बाद के sections में देखें
उदाहरण: What is an Iframe?
<iframe src="https://example.com"></iframe>Iframe के Dimensions को Control करना
Default रूप से, browsers iframes को एक छोटे, पहले से तय box में दिखाते हैं। आप अपने layout के हिसाब से फिट करने के लिए HTML attributes या CSS properties का इस्तेमाल करके उनकी width और height आसानी से control कर सकते हैं।
- fluid, mobile-friendly iframes बनाने के लिए CSS styling इस्तेमाल करना ही सबसे अच्छा तरीका है।
- Accepted attributes:
- width — integer pixels (या CSS width)
- height — integer pixels (या CSS height)
- frameborder, scrolling — obsolete; इसके बजाय CSS इस्तेमाल करें
उदाहरण: Controlling Iframe Dimensions
<iframe src="https://example.com" width="600" height="400"></iframe>Iframe के Borders को Customize करना
Default रूप से, browsers iframes को एक गहरे रंग के boxy border के साथ render करते हैं, जो आपकी website के design से मेल नहीं खाता। आप CSS properties से इस border को आसानी से हटा या customize कर सकते हैं।
उदाहरण: Customizing Iframe Borders
<iframe src="https://example.com" style="border: none;"></iframe>Security और sandbox Attribute
बाहरी websites को embed करना जोखिम भरा हो सकता है, क्योंकि वे आपके page पर अनचाहे scripts चला सकती हैं।
sandbox attribute embedded page की permissions को सीमित कर देता है, जिससे वह malicious scripts चलाने या pop-ups भेजने से रुक जाता है, जब तक आप स्पष्ट रूप से उसकी अनुमति न दें।
- जब भी आप ऐसी websites embed करें जिन पर आपका पूरा control नहीं है, तो हमेशा sandbox attribute इस्तेमाल करें।
- Accepted values:
- sandbox (खाली) — सभी restrictions लागू करें
- allow-scripts — JavaScript की अनुमति दें
- allow-same-origin — origin बनाए रखें
- allow-forms — form submission की अनुमति दें
- allow-popups — window.open और target=_blank की अनुमति दें
- allow-top-navigation — top page navigate करने की अनुमति दें
- allow-modals — alert, confirm, prompt की अनुमति दें
उदाहरण: Security and the sandbox Attribute
<iframe src="https://example.com" sandbox="allow-scripts"></iframe>Iframes के अंदर Links को Target करना
आप iframes का इस्तेमाल करके ऐसे interactive portals बना सकते हैं जहाँ आपके main page पर किसी link पर क्लिक करने से नया page सीधे iframe के अंदर load हो जाए। ऐसा करने के लिए आप अपने iframe को एक नाम देते हैं और अपने links के target attributes में उस नाम को reference करते हैं।
- यह technique सरल document portals या interactive sidebars बनाने के लिए बढ़िया है।
- Accepted attributes:
- iframe name — target के रूप में इस्तेमाल होने वाला identifier
- a target — iframe name | _self | _blank | _parent | _top
उदाहरण: Targeting Links Inside Iframes
<iframe name="portal" src="page1.html"></iframe>
<a href="page2.html" target="portal">Load page 2 in iframe</a>Lazy Loading Iframes
images की तरह ही, किसी iframe में loading="lazy" जोड़ने से browser को यह संकेत मिलता है कि जब तक iframe स्क्रीन पर scroll होकर आने वाला न हो, उसका content load करना टालें।
यह खासतौर पर page के नीचे embedded maps या videos के लिए काफी फायदेमंद है, जो अन्यथा initial page load को काफी धीमा कर सकते हैं।
- पहले load के समय दिखने वाले screen area से नीचे मौजूद iframes को हमेशा lazy load करें, जैसे किसी contact page के नीचे embedded map।
- Accepted values:
- loading — lazy | eager (default)
उदाहरण: Lazy Loading Iframes
<iframe src="https://maps.example.com" loading="lazy"></iframe>Accessibility के लिए title Attribute
हर iframe में एक title attribute होना चाहिए जो यह बताए कि उसमें क्या है, क्योंकि screen readers यह title सुनाते हैं ताकि users interact करने का फैसला लेने से पहले embedded content का purpose समझ सकें।
- iframe titles उसी तरह लिखें जैसे अच्छा alt text लिखते हैं — संक्षिप्त और असली content के बारे में स्पष्ट, generic नहीं।
- Accepted attributes:
- title — frame content के बारे में छोटा text; screen readers इसे पढ़ते हैं
उदाहरण: The title Attribute for Accessibility
<iframe src="https://example.com" title="Customer support chat widget"></iframe>referrerpolicy Attribute
referrerpolicy attribute यह control करता है कि आपके page की कितनी जानकारी Referer header में embedded iframe की destination तक भेजी जाए।
no-referrer या strict-origin जैसी strict policy सेट करने से embedded third-party content से आपके users की browsing privacy सुरक्षित रहती है।
- एक reasonable default के तौर पर referrerpolicy="strict-origin-when-cross-origin" इस्तेमाल करें, जो privacy और उपयोगी analytics data भेजने के बीच संतुलन बनाता है।
- Accepted values:
- no-referrer
- no-referrer-when-downgrade
- origin
- origin-when-cross-origin
- same-origin
- strict-origin
- strict-origin-when-cross-origin
- unsafe-url
उदाहरण: The referrerpolicy Attribute
<iframe src="https://example.com" referrerpolicy="no-referrer"></iframe>आम Iframe Use Cases
Iframes का इस्तेमाल आमतौर पर maps, video players, payment widgets, social media posts, और third-party comment systems embed करने के लिए किया जाता है — यानी हर वह जगह जहाँ आप किसी दूसरी service द्वारा control किए गए content को खुद बनाए बिना शामिल करना चाहते हैं।
उदाहरण: Common Iframe Use Cases
<iframe src="https://maps.example.com/embed" title="Store location map"></iframe>Chapter Quiz — Complete all 12 topics to unlock
0/12 topics done
Complete these topics first: