آیفریمها (Iframes) در HTML
یک آیفریم (iframe) در 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; برای حذف حاشیه دور آیفریم استفاده کنید.
این محتوا کاملا رایگان توسط تیم کدلپر ترجمه شده و در اختیار شما کاربران عزیز قرار گرفته است، هر گونه کپی برداری برای مقاصد غیر رایگان و بدون ذکر منبع، مورد پیگیری قانونی قرار میگیرد.
ترجمه شده از منبع: https://www.w3schools.com/