आईफ्रेम्स (Iframes)
आज हम iframe tag से दूसरे पेज को अपने पेज के अंदर एम्बेड करते हैं, और title देते हैं ताकि assistive tools जानें फ्रेम में क्या है।
- 1
Iframe क्या होता है
पिछले लेसन में forms पूरे हुए। आज अपने पेज के अंदर दूसरा webpage रखते हैं — नक्शा, दस्तावेज़, या सरल साइट अपनी खिड़की में।
वह खिड़की
<iframe>है।srcattribute लोड होने वाले पेज की ओर इशारा करता है।titleattribute फ्रेम का नाम है — जो लोग इसे देख न सकें उनके लिए। - 2
समस्या: यूज़र को अपनी वेबसाइट से बाहर भेजे बिना बाहरी कंटेंट कैसे दिखाएँ
कई बार आपको अपने पेज पर Google Maps, YouTube वीडियो या कोई बाहरी दस्तावेज़ दिखाना होता है। यूज़र को किसी दूसरे लिंक पर भेज देने से वह आपकी वेबसाइट छोड़ देता है।
HTML इसके लिए
<iframe>(इनलाइन फ्रेम) प्रदान करता है, जो आपके पेज के अंदर एक अलग खिड़की बनाकर बाहरी यूआरएल को लोड करता है। एक्सेसिबिलिटी के लिएtitleलगाना अनिवार्य है। - 3
Browser कैसे स्वतंत्र फ्रेम बनाता है और सुरक्षा प्रतिबंध लगाता है
ब्राउज़र iframe को एक स्वतंत्र ब्राउज़िंग कॉन्टेक्स्ट में चलाता है, जिसका अपना अलग DOM और सेशन इतिहास होता है।
कई बड़ी वेबसाइटें (जैसे बैंक या गूगल सर्च) सुरक्षा कारणों (Clickjacking हमलों से बचाव) से अपने पेज को आईफ्रेम में लोड होने से रोकती हैं (
X-Frame-Options: DENY)। इसलिए वही साइटें लोड होंगी जो एम्बेडिंग की अनुमति देती हैं। - 4
आज की प्रैक्टिस: एक बाहरी वेबपेज को Iframe में एम्बेड करना
नीचे दिए गए कोड में देखें कि कैसे
srcबाहरी पेज का पता बताता है औरtitleस्क्रीन रीडर्स को इस फ्रेम का उद्देश्य समझाता है। - 5
सुरक्षा और एक्सेसिबिलिटी: Title की अनिवार्यता और सैंडबॉक्सिंग
titleके बिना iframe assistive tools के लिए पहेली बन जाता है। एम्बेड का छोटा वर्णन लिखो। Size और sandbox नियम बाद में, जब ज़रूरत हो।
बाहरी वेबपेज को मानक ब्राउज़र अनुमतियों के साथ लोड करता है (स्क्रिप्ट्स, नेविगेशन और फॉर्म्स चालू रहते हैं)।
कड़े सुरक्षा प्रतिबंध लागू करता है। दुर्भावनापूर्ण स्क्रिप्ट्स, पॉपअप्स और अनधिकृत नेविगेशन को ब्लॉक करता है।
आप क्या सीखेंगे
- 1Iframe दूसरा पेज एम्बेड करता है
- 2src लोड होने वाला URL है
- 3title फ्रेम का नाम है
- 4कुछ साइटें embedding रोकती हैं
- 5शुरुआत के लिए एक साफ़ embed काफ़ी है
लाइन-बाय-लाइन
<iframe>Embedded browsing context खोलता है — पेज के अंदर पेज। Matching closing tag चाहिए।
src="https://example.com"फ्रेम में दिखाने वाले पेज का पता। दूसरी साइट हो तो पूरा URL इस्तेमाल करो।
title="Example.com home page"Embed का छोटा वर्णन। Assistive tools ज़ोर से पढ़ते हैं। खाली मत छोड़ो।
खुद ट्राई करो
एक <iframe> लिखो जो https://example.com लोड करे, और साफ़ title लगाओ। </iframe> से बंद करो।
हिंट: URL के लिए src, वर्णन के लिए title — दोनों opening tag पर।
गलती कहाँ होती है
- 1.
titleछोड़ देना। Screen reader यूज़र्स के लिए फ्रेम पहेली बन जाता है। - 2.हर website को iframe में लोड होने की उम्मीद। कई साइटें embedding रोकने वाले headers भेजती हैं।
इंटरव्यू की तैयारी
Q: <iframe> क्या होता है और यह कैसे काम करता है?↓
<iframe> वर्तमान वेबपेज के अंदर एक पूरी तरह स्वतंत्र बाहरी HTML दस्तावेज़ को एम्बेड करता है। इसका अपना अलग Window ऑब्जेक्ट, DOM ट्री और ब्राउज़िंग इतिहास होता है।
Q: हर <iframe> पर title एट्रिब्यूट लगाना क्यों अनिवार्य है?↓
नेत्रहीन और स्क्रीन रीडर यूज़र्स के लिए title एट्रिब्यूट यह स्पष्ट करता है कि उस फ्रेम के अंदर क्या सामग्री चल रही है, ताकि वे बिना भटके समझ सकें।
Q: Sandbox एट्रिब्यूट का क्या महत्व है?↓
sandbox एट्रिब्यूट एम्बेडेड पेज पर कड़े सुरक्षा प्रतिबंध लागू करता है। यह डिफ़ॉल्ट रूप से स्क्रिप्ट्स, फॉर्म सबमिशन, पॉपअप और मुख्य विंडो में अवांछित बदलावों को रोककर आपकी साइट को सुरक्षित रखता है।