खोज…
पैरामीटर
| गुण | विवरण |
|---|---|
name | आइफ्रेम के src को बदलने के लिए a टैग के साथ उपयोग किए जाने वाले तत्व का नाम सेट करता है। |
width | पिक्सेल में तत्व की चौड़ाई सेट करता है। |
height | पिक्सेल में तत्व की ऊँचाई सेट करता है। |
src | उस पृष्ठ को निर्दिष्ट करता है जिसे फ्रेम में प्रदर्शित किया जाएगा। |
srcdoc | उस सामग्री को निर्दिष्ट करता है जो फ्रेम में प्रदर्शित होगी, यह मानते हुए कि ब्राउज़र इसका समर्थन करता है। सामग्री मान्य HTML होनी चाहिए। |
sandbox | जब सेट किया जाता है, iframe की सामग्री को एक अद्वितीय मूल से माना जाता है और स्क्रिप्ट, प्लगइन्स, फ़ॉर्म और पॉपअप सहित सुविधाओं को अक्षम किया जाएगा। मूल्यों की एक अलग-अलग सूची को जोड़कर प्रतिबंधों को चुनिंदा रूप से आराम दिया जा सकता है। संभावित मानों के लिए रिमार्क्स में तालिका देखें। |
allowfullscreen | क्या iframe की सामग्री को requestFullscreen() का उपयोग करने की अनुमति दी requestFullscreen() |
टिप्पणियों
एक iframe वर्तमान HTML दस्तावेज़ में किसी अन्य दस्तावेज़ को एम्बेड करने के लिए उपयोग किया जाता है।
आप प्रदर्शन के लिए iframes का उपयोग कर सकते हैं:
- उसी डोमेन पर अन्य HTML पृष्ठ;
- किसी अन्य डोमेन पर अन्य HTML पृष्ठ (नीचे देखें - समान-मूल नीति);
- पीडीएफ दस्तावेज़ (हालांकि IE में कुछ समस्याएं हो सकती हैं, यह SO प्रश्न मदद कर सकता है);
आप एक अंतिम उपाय के रूप में एक iframe का उपयोग करते हैं, क्योंकि इसमें बुकमार्क और नेविगेशन की समस्याएँ हैं, और एक iframe के अलावा हमेशा बेहतर विकल्प होते हैं। इस SO प्रश्न से आपको iframes के उतार-चढ़ाव के बारे में अधिक समझने में मदद मिलेगी।
समान-मूल नीति
कुछ साइटों को एक iframe का उपयोग करके प्रदर्शित नहीं किया जा सकता है, क्योंकि वे समान-मूल नीति नामक नीति लागू करते हैं । इसका मतलब यह है कि जिस साइट पर आइफ्रेम निहित है वह उसी डोमेन पर होना चाहिए जो प्रदर्शित किया जाना है।
यह नीति उस छेड़छाड़ की सामग्री पर भी लागू होती है जो एक iFrame के अंदर रहती है। यदि iFrame किसी भिन्न डोमेन से सामग्री एक्सेस कर रहा है, तो आप iFrame के अंदर की सामग्री तक पहुँच या हेरफेर नहीं कर पाएंगे।
W3C पर iframe तत्व
sandbox विशेषता
sandbox विशेषता, जब सेट किया जाता है, iframe में अतिरिक्त प्रतिबंध जोड़ता है। इन प्रतिबंधों को शिथिल करने के लिए टोकन की एक अलग से सूची का उपयोग किया जा सकता है।
| मूल्य | विवरण |
|---|---|
allow-forms | प्रपत्र जमा करने की अनुमति देता है। |
allow-pointer-lock | जावास्क्रिप्ट पॉइंटर एपीआई को सक्षम करता है। |
allow-popups | पॉपअप window.open का उपयोग करके बनाया जा सकता है। इसे window.open या <a target="_blank" |
allow-same-origin | Iframe दस्तावेज़ को एक अद्वितीय दिए जाने के बजाय अपने वास्तविक मूल का उपयोग करता है। यदि allow-scripts के साथ इफ्रेम दस्तावेज़ का उपयोग किया जाता है, तो सभी सैंडबॉक्सिंग हटा सकते हैं यदि यह मूल दस्तावेज के समान मूल से हो। |
allow-scripts | स्क्रिप्ट्स को सक्षम करता है। Iframe दस्तावेज़ और मूल दस्तावेज़ postMessage() API का उपयोग करते हुए एक दूसरे के साथ संवाद करने में सक्षम हो सकते हैं। यदि allow-same-origin के साथ उपयोग किया जाता है, तो iframe दस्तावेज़ allow-same-origin सैंडपेपर के समान मूल से होने पर सभी सैंडबॉक्सिंग निकाल सकता है। |
allow-top-navigation | आइफ्रेम की सामग्री को शीर्ष स्तर के दस्तावेज़ के स्थान को बदलने की अनुमति देता है। |
इनलाइन फ्रेम की मूल बातें
"IFrame" शब्द का अर्थ इनलाइन फ्रेम है। इसका उपयोग आपके पेज में किसी अन्य पेज को शामिल करने के लिए किया जा सकता है। यह एक छोटा सा फ्रेम जो की सटीक सामग्री से पता चलता निकलेगा base.html ।
<iframe src="base.html"></iframe>
फ़्रेम का आकार सेट करना
IFrame को width और height विशेषताओं का उपयोग करके आकार दिया जा सकता है, जहां पिक्सेल में मानों का प्रतिनिधित्व किया जाता है (HTML 4.01 अनुमत प्रतिशत मान, लेकिन HTML 5 केवल CSS पिक्सेल में मानों को अनुमति देता है)।
<iframe src="base.html" width="800" height="600"></iframe>
IFrames के साथ एंकर का उपयोग करना
आम तौर पर एक iframe के भीतर वेबपेज का परिवर्तन, iframe से शुरू किया जाता है, उदाहरण के लिए, Ifame के अंदर एक लिंक पर क्लिक करके। हालाँकि, IFrame के बाहर से एक IFrame की सामग्री को बदलना संभव है। आप एक एंकर टैग का उपयोग कर सकते हैं, जिसकी href विशेषता वांछित URL पर सेट है और जिसका target विशेषता iframe के name विशेषता पर सेट है।
<iframe src="webpage.html" name="myIframe"></iframe>
<a href="different_webpage.html" target="myIframe">Change the Iframe content to different_webpage.html</a>
"Srcdoc" विशेषता का उपयोग करना
पूरे HTML दस्तावेज़ के रूप में iframe की सटीक सामग्री को निर्दिष्ट करने के लिए srcdoc विशेषता ( src विशेषता के बजाय) का उपयोग किया जा सकता है। यह "IFrames are cool!" पाठ के साथ एक IFrame उत्पन्न करेगा।
<iframe srcdoc="<p>IFrames are cool!</p>"></iframe>
यदि srcdoc विशेषता ब्राउज़र द्वारा समर्थित नहीं है, तो IFrame इसके बजाय src विशेषता का उपयोग करने के लिए वापस आ जाएगा, लेकिन यदि src और srcdoc दोनों विशेषताएँ मौजूद हैं और ब्राउज़र द्वारा समर्थित हैं, तो srcdoc पूर्वता लेता है।
<iframe srcdoc="<p>Iframes are cool!</p>" src="base.html"></iframe>
उपरोक्त उदाहरण में, यदि ब्राउज़र srcdoc विशेषता का समर्थन नहीं करता है, तो यह इसके बजाय base.html पृष्ठ की सामग्री को प्रदर्शित करेगा।
सैंडबॉक्सिंग
निम्नलिखित सभी प्रतिबंधों के साथ एक अविश्वसनीय वेब पेज एम्बेड करता है
<iframe sandbox src="http://example.com/"></iframe>
पृष्ठ को स्क्रिप्ट चलाने और फ़ॉर्म सबमिट करने की अनुमति देने के लिए, sandbox attribute लिए allow-scripts और allow-forms जोड़ें।
<iframe sandbox="allow-scripts allow-forms" src="http://example.com/"></iframe>
यदि मूल डोमेन पेज के समान डोमेन पर अविश्वसनीय सामग्री (जैसे उपयोगकर्ता टिप्पणियां) हैं, तो स्क्रिप्ट को अक्षम करने के लिए एक iframe का उपयोग किया जा सकता है, जबकि अभी भी मूल दस्तावेज़ को जावास्क्रिप्ट का उपयोग करके सामग्री के साथ बातचीत करने की अनुमति मिलती है।
<iframe sandbox="allow-same-origin allow-top-navigation" src="http://example.com/untrusted/comments/page2">
मूल दस्तावेज़ ईवेंट श्रोताओं को जोड़ सकते हैं और अपनी सामग्री को फिट करने के लिए IFrame का आकार बदल सकते हैं। यह, allow-top-navigation , सैंडबॉक्स किए गए iframe को मूल दस्तावेज़ का हिस्सा बना सकता है।
यह सैंडबॉक्स सैनिटाइजिंग इनपुट के लिए एक प्रतिस्थापन नहीं है, लेकिन गहराई रणनीति में एक रक्षा के हिस्से के रूप में इस्तेमाल किया जा सकता है।
यह भी ध्यान रखें कि इस सैंडबॉक्स को किसी हमलावर द्वारा किसी उपयोगकर्ता को सीधे iframe के स्रोत पर जाने के लिए समझा जा सकता है। इस हमले को कम करने के लिए सामग्री सुरक्षा नीति HTTP हेडर का उपयोग किया जा सकता है।