एचटीएमएल <iframe> टैग
उदाहरण
एक इनलाइन फ्रेम निम्नानुसार चिह्नित किया गया है:
<iframe src="https://www.w3schools.com" title="W3Schools Free
Online Web Tutorials"></iframe>
नीचे और अधिक "इसे स्वयं आज़माएं" उदाहरण।
परिभाषा और उपयोग
<iframe>टैग एक इनलाइन फ्रेम निर्दिष्ट करता है ।
वर्तमान HTML दस्तावेज़ में किसी अन्य दस्तावेज़ को एम्बेड करने के लिए एक इनलाइन फ़्रेम का उपयोग किया जाता है।
युक्ति: स्टाइल करने के लिए CSS का उपयोग करें <iframe>
(नीचे उदाहरण देखें)।
युक्ति: के लिए हमेशा एक शीर्षक विशेषता शामिल करना एक अच्छा अभ्यास है <iframe>। इसका उपयोग स्क्रीन रीडर द्वारा यह पढ़ने के लिए किया जाता है कि सामग्री क्या <iframe>
है।
ब्राउज़र समर्थन
| Element | |||||
|---|---|---|---|---|---|
| <iframe> | Yes | Yes | Yes | Yes | Yes |
गुण
| Attribute | Value | Description |
|---|---|---|
| allow | Specifies a feature policy for the <iframe> | |
| allowfullscreen | true false |
Set to true if the <iframe> can activate fullscreen mode by calling the requestFullscreen() method |
| allowpaymentrequest | true false |
Set to true if a cross-origin <iframe> should be allowed to invoke the Payment Request API |
| height | pixels | Specifies the height of an <iframe>. Default height is 150 pixels |
| loading | eager lazy |
Specifies whether a browser should load an iframe immediately or to defer loading of iframes until some conditions are met |
| name | text | Specifies the name of an <iframe> |
| referrerpolicy | no-referrer no-referrer-when-downgrade origin origin-when-cross-origin same-origin strict-origin-when-cross-origin unsafe-url |
Specifies which referrer information to send when fetching the iframe |
| sandbox | allow-forms allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-top-navigation |
Enables an extra set of restrictions for the content in an <iframe> |
| src | URL | Specifies the address of the document to embed in the <iframe> |
| srcdoc | HTML_code | Specifies the HTML content of the page to show in the <iframe> |
| width | pixels | Specifies the width of an <iframe>. Default width is 300 pixels |
वैश्विक गुण
<iframe>टैग HTML में वैश्विक विशेषताओं का भी समर्थन करता है ।
घटना गुण
<iframe>टैग HTML में ईवेंट विशेषताओं का भी समर्थन करता है ।
और ज्यादा उदाहरण
उदाहरण
iframe बॉर्डर जोड़ें और निकालें (CSS के साथ):
<iframe src="/default.asp" width="100%" height="300" style="border:1px solid
black;">
</iframe>
<iframe src="/default.asp" width="100%"
height="300" style="border:none;">
</iframe>
संबंधित पृष्ठ
एचटीएमएल ट्यूटोरियल: एचटीएमएल इफ्रेम्स
एचटीएमएल डोम संदर्भ: आईफ्रेम ऑब्जेक्ट
डिफ़ॉल्ट सीएसएस सेटिंग्स
अधिकांश ब्राउज़र <iframe>निम्न डिफ़ॉल्ट मानों के साथ तत्व प्रदर्शित करेंगे:
iframe:focus {
outline: none;
}
iframe[seamless] {
display: block;
}