HTML5 – <iframe> TAG

🔹 Introduction

<iframe> (Inline Frame) tag का उपयोग current webpage के अंदर किसी दूसरे webpage या external content को embed करने के लिए किया जाता है।

इसकी सहायता से webpage के अंदर एक छोटी window/frame बनाई जाती है, जिसमें किसी दूसरे source का content display किया जा सकता है।

<iframe> में निम्न प्रकार के content को embed किया जा सकता है:

• Another Webpage

• YouTube Video

• Google Map

• Online Form

• Document

• अन्य embeddable external content

🔹 Meaning of iframe

iframe का पूरा नाम Inline Frame है।

Inline Frame का अर्थ है ऐसा frame जो current webpage के अंदर ही display होता है।

पुराने <frameset> की तरह यह पूरे browser window को divide नहीं करता, बल्कि webpage के content के बीच एक embedded frame बनाता है।

🔹 Basic Syntax

<iframe src="URL"></iframe>

यहाँ:

• <iframe> → Inline Frame को define करता है।

• src → जिस webpage या content को embed करना है उसका URL/path specify करता है।

• </iframe> → iframe को close करता है।

🔹 Examples

1. External Webpage

<iframe src="https://www.example.com">
</iframe>

यह example.com को current webpage के अंदर display करने का प्रयास करेगा।

2. Local HTML Page

यदि आपके project में index.html और sample.html हैं:

project/
│
├── index.html
└── sample.html

तो:

<iframe src="sample.html">
</iframe>

sample.html current webpage के अंदर दिखाई देगा।

3. YouTube Video

YouTube द्वारा दिया गया embed URL iframe में use किया जा सकता है।

<iframe
    src="https://www.youtube.com/embed/VIDEO_ID">
</iframe>

यह webpage के अंदर YouTube video display कर सकता है।

4. Google Map

Google Maps से मिलने वाले embed code में भी सामान्यतः <iframe> का उपयोग होता है।

<iframe
    src="MAP_EMBED_URL">
</iframe>

🔹 ATTRIBUTES OF <iframe> TAG

<iframe> tag के कुछ important attributes निम्नलिखित हैं:

🔹 src Attribute

src सबसे important attribute है।

यह बताता है कि iframe के अंदर कौन-सा webpage या content load करना है।

Example:

<iframe src="about.html">
</iframe>

यहाँ about.html iframe के अंदर load होगा।

🔹 width और height

width iframe की चौड़ाई और height iframe की ऊँचाई set करता है।

Example:

<iframe
    src="sample.html"
    width="500"
    height="300">
</iframe>

इसमें:

• Width → 500 pixels

• Height → 300 pixels

है।

🔹 title Attribute

title iframe के अंदर मौजूद content का description provide करता है।

यह विशेष रूप से accessibility के लिए useful है।

Example:

<iframe
    src="sample.html"
    title="Sample Webpage">
</iframe>

🔹 name Attribute

name iframe को एक specific name देता है।

इस name का उपयोग किसी link के target में करके content को उसी iframe में open किया जा सकता है।

Example:

<iframe
    name="content"
    width="500"
    height="300">
</iframe>

<br>

<a href="about.html" target="content">
    About Us
</a>

जब About Us पर click किया जाएगा, तो about.html उसी iframe में open होगा।

🔹 loading Attribute

loading attribute iframe की loading को control करने में मदद करता है।

इसके common values हैं:

• eager → iframe को तुरंत load करने के लिए।

• lazy → iframe को आवश्यकता के अनुसार बाद में load करने के लिए।

Example:

<iframe
    src="sample.html"
    loading="lazy">
</iframe>

🔹 allowfullscreen Attribute

यह embedded content को fullscreen mode में display करने की permission देता है।

Example:

<iframe
    src="video.html"
    allowfullscreen>
</iframe>

यह video जैसे content के लिए useful हो सकता है।

🔹 COMPLETE IFRAME EXAMPLE

<html>

<head>

    <title>HTML5 Iframe</title>

</head>

<body>

    <h2>Embedded Webpage</h2>

    <iframe
        src="sample.html"
        width="600"
        height="400"
        title="Sample Webpage">
    </iframe>

</body>

</html>

इसमें sample.html webpage को 600 × 400 pixels के iframe के अंदर display किया जाएगा।

🔹 ADVANTAGES OF <iframe>

<iframe> के प्रमुख advantages:

• External webpages, videos और maps को आसानी से embed किया जा सकता है।

• Embedded content को main webpage के अंदर एक separate frame में display किया जा सकता है।

• Main webpage को reload किए बिना embedded content display किया जा सकता है।

• YouTube videos, Google Maps और अन्य embeddable content के लिए useful है।

• Advertisements, forms और अन्य external content display करने के लिए भी use किया जा सकता है।

🔹 DISADVANTAGES OF <iframe>

<iframe> की कुछ limitations हैं:

• Embedded content बड़ा होने पर webpage की loading slow हो सकती है।

• iframe के अंदर का content search engines के लिए main webpage के content की तरह आसानी से index नहीं हो सकता।

• Fixed width और height देने पर iframe mobile devices पर properly fit नहीं हो सकता।

• कुछ websites security reasons के कारण iframe में embed होने की अनुमति नहीं देतीं।

🔹 <frameset> vs <iframe>

⭐ QUICK REVISION

<iframe> → Inline Frame
src      → कौन-सा content load करना है
width    → Frame की चौड़ाई
height   → Frame की ऊँचाई
title    → Frame का description
name     → Frame की पहचान
loading  → Loading behavior

Basic Example:

<iframe
    src="sample.html"
    width="500"
    height="300"
    title="Sample Page">
</iframe>

➡️ इससे sample.html current webpage के अंदर एक 500 × 300 pixels की inline frame में display होगा।