تگ iframe و کاربرد آن در صفحات HTML - بررسی با مثال
در HTML شما می توانید یک frame درون خطی (inline frame) را با تگ <iframe> تعریف کنید. تگ <iframe> ربطی به تگ <frameset> ندارد، در عوض می تواند در هر جای سند شما ظاهر شود. تگ <iframe> یک منطقه مستطیلی را درون سند (document) تعریف می کند که در آن مرورگر می تواند یک سند (document) جداگانه، مانند scrollbar و borderها را نمایش دهد.
یک فریم inline برای جاسازی document دیگری در document یا سند HTML فعلی استفاده می شود.
از ویژگی src برای مشخص کردن آدرس اینترنتیِ سندی (document) که inline frame را اشغال می کند، استفاده می شود.
مثال:
مثال زیر نشان می دهد که چگونه می توانید از <iframe> استفاده کنید -
<!DOCTYPE html>
<html>
<head>
<title>HTML Iframes</title>
</head>
<body>
<p>Document content goes here...</p>
<iframe src = "/html/menu.htm" width = "555" height = "200">
Sorry your browser does not support inline frames.
</iframe>
<p>Document content also go here...</p>
</body>
</html>
کد فوق نتیجه زیر را تولید می کند-
ویژگی های تگ <Iframe>
بیشترین ویژگی های تگ <iframe> مانند name، class، frameborder، id، longdesc، marginheight، marginwidth، scrolling، style و title رفتاری دقیقا مانند صفات متناظر برای برچسب <frame> را دارند.
توجه – ویژگی هایی چون frameborder، marginwidth، longdesc، scrolling،marginheight در HTML5 منسوخ شده اند. بنابراین از این ویژگی ها استفاده نکنید.
ویژگی |
توضیح |
src |
این ویژگی برای نام فایلی که باید در کادر بارگذاری شود، استفاده می شود. مقدار آن می تواند هر URL ی باشد. به عنوان مثال، src = "/html/top_frame.htm" یک فایل HTML موجود در دایرکتوری html را بارگذاری می کند. |
name |
این ویژگی به شما اجازه می دهد تا به یک frame ، یک نام اختصاص دهید. از این ویژگی برای نشان دادن اینکه، کدام سند (document) باید بارگذاری شود، استفاده می شود. این ویژگی بسیار مهم است بخصوص زمانی که می خواهید ، لینک ها را در یک frame ایجاد کنید و صفحات را داخل یک frame دیگر بارگذاری کنید؛ در این صورت، frame دوم نیاز به یک نام برای شناسایی خود، به عنوان هدفِ لینک، دارد. |
frameborder |
این ویژگی مشخص می کند که آیا border های یک frame نمایش داده شوند یا خیر؛ این ویژگی، مقدار داده شده در ویژگی frameborder در تگ <frameset> را بازنویسی یا override می کند، و این ویژگی می تواند مقادیر 1 به معنای بله و 0 به معنای نه را به خود اختصاص دهد. |
marginwidth |
این ویژگی به شما این امکان را می دهد تا عرضِ (width) فضایِ بینِ border های سمت چپ و راست یک Frame و محتویات frame را مشخص کنید. این مقدار برحسب واحد پیکسل داده می شود. برای مثال marginwidth = "10". |
marginheight |
این ویژگی به شما این امکان را می دهد تا ارتفاعِ (height) فضایِ بینِ borderهای سمت بالا و پایین یک Frame و محتویات آن را مشخص کنید. این مقدار برحسب واحد پیکسل داده می شود. برای مثال marginheight = "10". |
height |
این ویژگی ارتفاع <iframe> را مشخص می کند. |
scrolling |
این ویژگی ظاهرِ نوارهای پیمایش (scrollbar) را که در یک frame ظاهر می شوند را کنترل می کند. این ویژگی مقادیر "yes"، "no" یا "auto" را می گیرد. به عنوان مثال، scrolling = "no" به این معنی است که frame نباید نوار پیمایشی داشته باشد. |
longdesc |
این ویژگی به شما امکان می دهد یک لینک به صفحه دیگر که حاوی توضیحات طولانی درباره ی محتویات frame است، ایجاد کنید. به عنوان مثال longdesc = "framedescription.htm". |
width |
این ویژگی طول <iframe> را مشخص می کند. |
این فصل در یک نگاه:
در این فصل صفحات قالب فروشگاهی را بطور کامل واکنشگرا می کنیم.…
HTML مخفف عبارت Hypertext Markup Language است. این زبان در واقع یک نوع زبان نشانهگذاری استاندارد برای ایجاد صفحات وب و وب اپلیکیشنها محسوب میشود. در واقع HTML را عنصر کلیدی صفحات وب می…این فصل در یک نگاه:
فصل سوم…
آموزش طراحی ریسپانسیو مدرن و جذابتر نسبت به بوتسرپ (همراه با ساخت صفحه اصلی و پنل یک آژانس مسافربری) آموزش پروژه محور فریمورک متریالایز برای اولین بار بین وب سایت های آموزشی آموزش تمامی …این فصل در یک نگاه:
ساخت منوی مدیریت سایت،ایجاد بخش دسته بندی ها ، جدول نمایش دسته ها و ایجاد دسته جدید،ایجاد بخش ویژگی های یک دسته،ایجاد وی…
این مجموعه با تلفیقی از فریمورک bootstrap و کد های html و css ارائه گردیده و پیش نیاز این آموزش ، دوره دیجی کالای آقای مهندس بلاغی است چون این پروژه در قالب mvc پیاده گردیده و با توجه به ا…این فصل در یک نگاه:
در این فصل(فصل یازدهم مجموعه)،به طراحی CMS (سیستم مدیریت محتوا)اختصاصی فروشگاه می پردازیم.هدف از طراحی این بخش،آنست که م…
در این مجموعه آموزشی قصد داریم از صفر تا صد طراحی یک فروشگاه اینترنتی رو به صورت کامل آموزش بدهیم.این فروشگاه شامل تمامی بخش های مورد نیاز یک فروشگاه اینترنتی است. هدف از این مجموعه،آموزش…این فصل در یک نگاه:
طراحی پنل مدیریت(دسته بندی)- دسته بندی یا category - نمایش دسته های فرعی در view با ورود به یکی از دسته های اصلی و آشن…
توضیحات کلی مجموعه: این مجموعه توسط فریمورک محبوب و دوست داشتنی bootstrap و به صورت تضمینی و صفر تا صد جهت یادگیری کارآموزان عزیز ارائه گردیده و دوستانی که این دوره را به طور کامل و دقیق…این فصل در یک نگاه:
مباحث تکمیلی فریم ورک لاراول…
فصل اول :آموزش مقدماتی فریم ورک لاراول معرفی فریم ورک لاراول و پیشنیازهای انجام کار انجام کانفیگ های اولیه برای نصب و راه اندازی فریم ورک معرفی روش های نصب پروژه لاراولی از طریق سایت گی…این فصل در یک نگاه:
مباحث مقدماتی فریم ورک react.js…
توضیحات کلی مجموعه: فصل اول : آشنایی با مباحث مقدماتی فریم ورک react.js نصب و راه اندازی node.js و کلیه پیش نیازهای لازم نصب فریم ورک react روی لوکال و انجام تست های لازم آغاز آشنایی …این فصل در یک نگاه:
رشد و درآمدزایی یک وب سایت یا کسب و کار اینترنتی کاملا به ذوق و مهارت وب مستر یا همان مدیر اصلی وب سایت گره خورده و متاس…
اصول مدیریت وب سایت برای وب مستر شدن برای موفقیت یک وب سایت لازم الاجراست. زیرا شما دوست دارید وب سایت خود را به کارخانه پولسازی تبدیل کنید. این واقعیت رویا نیست. هرکس این اصول را بداند به …