آی فریم ها در HTML

آی‌فریم‌ها (Iframes) در HTML

یک آی‌فریم (iframe) در HTML برای نمایش یک صفحه وب در دل یک صفحه وب دیگر استفاده می‌شود.

سینتکس آی‌فریم در HTML

تگ <iframe> در HTML یک قاب درون‌خطی (inline frame) را مشخص می‌کند. از یک قاب درون‌خطی برای جاسازی یک سند دیگر در داخل سند HTML فعلی استفاده می‌شود.

سینتکس

<iframe src="url" title="description"></iframe>

نکته: همیشه یک خصوصیت title برای <iframe> قرار دهید. این کار یک رویه خوب است و توسط صفحه‌خوان‌ها (screen readers) استفاده می‌شود تا محتوای آی‌فریم را برای کاربر بخوانند.

آی‌فریم - تنظیم ارتفاع و عرض

از خصوصیت‌های height و width برای مشخص کردن اندازه آی‌فریم استفاده کنید. ارتفاع و عرض به‌طور پیش‌فرض بر حسب پیکسل مشخص می‌شوند:

مثال

<iframe src="demo_iframe.htm" height="200" width="300" title="Iframe Example"></iframe>

همچنین می‌توانید خصوصیت style را اضافه کرده و از ویژگی‌های height و width در CSS استفاده کنید:

مثال

<iframe src="demo_iframe.htm" style="height:200px;width:300px;" title="Iframe Example"></iframe>

آی‌فریم - حذف حاشیه

به‌طور پیش‌فرض، یک آی‌فریم دارای یک حاشیه (border) در اطراف خود است. برای حذف این حاشیه، خصوصیت style را اضافه کرده و از ویژگی border در CSS استفاده کنید:

مثال

<iframe src="demo_iframe.htm" style="border:none;" title="Iframe Example"></iframe>

با CSS، شما همچنین می‌توانید اندازه، استایل و رنگ حاشیه آی‌فریم را تغییر دهید:

مثال

<iframe src="demo_iframe.htm" style="border:2px solid red;" title="Iframe Example"></iframe>

آی‌فریم - مقصد برای یک لینک

یک آی‌فریم می‌تواند به عنوان قاب مقصد برای یک لینک استفاده شود. خصوصیت target در لینک باید به خصوصیت name در آی‌فریم اشاره کند:

مثال

<iframe src="demo_iframe.htm" name="iframe_a" title="Iframe Example"></iframe>

<p>
  <a href="https://www.w3schools.com" target="iframe_a">W3Schools.com</a>
</p>

خلاصه فصل

• تگ <iframe> در HTML یک قاب درون‌خطی را مشخص می‌کند.

• خصوصیت src آدرس (URL) صفحه‌ای که باید جاسازی شود را تعریف می‌کند.

• همیشه خصوصیت title را قرار دهید (برای صفحه‌خوان‌ها).

• خصوصیت‌های height و width اندازه آی‌فریم را مشخص می‌کنند.

• از border:none; برای حذف حاشیه دور آی‌فریم استفاده کنید.

تگ آی‌فریم در HTML