ای فریم (iframe) مخفف عبارت inline frame، برای قرار دادن یک صفحه وب سایت در وب سایت دیگری استفاده می شود.
به عنوان مثال در تصویر زیر دیده می شود که در وب سایت webtml.ir با استفاده از ای فریم، یکی از صفحات سایت w3schools نمایش داده شده است:
استفاده از iframe در html
در HTML ای فریم به صورت تگ <iframe> استفاده می شود. به مثال زیر توجه کنید:
<iframe src="URL"></iframe>
خصوصیت SRC مشخص می کند که آدرس URL صفحه ای که قرار است به صورت inline قرار بگیرد، چیست.
مشخص کردن عرض و ارتفاع ای فریم
برای تعیین اندازه iframe، از دو خصوصیت width و height استفاده می کنیم.
مقداری که به عرض و ارتفاع می دهیم، به صورت پیش فرض به مقیاس پیکسل می باشد، اما می توانیم عدد را به صورت درصد (%) نیز وارد کنیم.
<iframe src="demo_iframe.htm" height="200" width="300"></iframe>
همانند مثال زیر، برای تعیین عرض و ارتفاع iframe از کد css نیز می توان استفاده کرد:
<iframe src="demo_iframe.htm" style="height:200px;width:300px;"></iframe>
چگونگی حذف border ای فریم
به صورت پیش فرض، iframe نوار باریکی به عنوان border دارد که می توان با استفاده از کد css آن را از بین برد. به مثال زیر دقت کنید:
<iframe src="demo_iframe.htm" style="border:none;"></iframe>
با استفاده از کد css همچنین می توانید رنگ، استایل و اندازه border را تغییر دهید:
<iframe src="demo_iframe.htm" style="border:2px solid red;"></iframe>
استفاده از ای فریم در لینک
با استفاده از دستور زیر می توان لینک خود را به صورت inline نمایش داد. برای انجام این کار، ابتدا برای تگ <iframe>، مقادیر <src> و <name> را تعیین می کنیم.
در تگ <a> نیز مقدار <target> را برابر عبارتی که برای name در ای فریم تعریف کرده بودیم، قرار می دهیم.
برای درک بهتر مطلب، به مثال زیر توجه کنید:
<iframe src="demo_iframe.htm" name="iframe_a"></iframe> <p><a href="webtml.ir" target="iframe_a">webtml.ir</a></p>
مرورگرهایی که از iframe پشتیبانی می کنند
جدول زیر لیست تمام مرورگرهایی که iframe را نمایش می دهند، نشان می دهد:
نکته: بهتر است در کد خود بین تگ های باز و بسته <iframe> متنی قرار دهید تا هنگامی که مرورگری، iframe را پشتیبانی نمی کند، این متن گویای این باشد که در اینجا از ای فریم استفاده شده است.
برای استفاده بیشتر از مطالب، در مورد تگ های مختلف html می توانید از سایت w3schools.com نیز بازدید نمایید.
دیدگاه بگذارید