گاهی اوقات نیاز پیدا می کنید که محتوای یک سایت دیگر را درون سایت خودتان نشان بدهید، ویدئویی را از سایت هایی مثل آپارات و youtube را در سایت خودتون نمایش بدید بدون اینکه خودتان پلیر آن را طراحی کنید یا در کل یک سند را درون سند HTML دیگر نمایش بدهید، در این مواقع تگ iframe به کمک شما می آید و این کار را به راحتی تمام برای شما انجام می دهد.

قواعد نوشتن iframe در HTML

تگ iframe یک frame درون خطی را ایجاد می کند.

از inline frame برای جاسازی سند دیگری درون سند HTML فعلی استفاده می شود.

نحوه نوشتن آن در مثال زیر آمده است:

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

بهتر است که همیشه Attribute (ویژگی) title را برای تگ iframe استفاده کنید، این امر باعث می شود که screen reader ها (خوانندگان صفحه) با خواندن آن متوجه بشوند که محتوای این تگ شامل چه چیزی است.

تنظیم عرض و ارتفاع تگ iframe

برای مشخص کردن اندازه یک تگ iframe در صفحه، از ویژگی های width (عرض) و height (ارتفاع) آن استفاده می کنیم.

width (عرض) و height (ارتفاع) به طور پیش فرض با pixel (پیکسل) مشخص می شوند.

مثال: در زیر یک تگ iframe با عرض 300 پیکسل و ارتفاع 200 پیکسل ایجاد کرده ایم.

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

یا می توانید ویژگی style را به تگ iframe اضافه کنید و از خصوصیات width و height در CSS بهره ببرید. مانند مثال زیر:

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

حذف border (حاشیه) در تگ iframe

به طور پیش فرض تگ iframe دارای یک border (حاشیه) نازک است.

برای حذف یا تغییر اندازه و رنگ border می توانید از ویژگی style و از خصوصیت border استفاده کنید.

مثال: در زیر border تگ iframe را با ویژگی style و خصوصت border حذف کرده ایم.

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

مثال: در زیر border تگ iframe را با ویژگی style و خصوصیت border تغییر رنگ و اندازه داده ایم.

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

تگ iframe به عنوان target frame

از تگ iframe می توان به عنوان target frame استفاده کرد، یعنی این که زمانی که شما بر روی لینک کلیک کنید محتوای لینک در تگ iframe نمایش داده شود.

ویژگی target در تگ a (لینک)، باید به ویژگی name تگ iframe اشاره کند. به مثال زیر دقت کنید.

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

<p><a href=" https://jobteam.ir/" target="iframe_a">jobteam.ir</a></p>

به ویژگی target در تگ a و به ویژگی name در تگ iframe دقت کنید، هر دو از عنوان یکسانی استفاده می کنند و همین باعث می شود که زمانی که بر روی لینک کلیک شود، محتوای آن درون تگ iframe نمایش داده شود.

تصویر خروجی قبل از کلیک بر روی لینک:

تصویر خروجی بعد از کلیک بر روی لینک:

تگ های HTML

در زیر جدولی از تگ های استفاده شده در این مقاله و کارکرد آن ها را برای شما تهیه کرده ایم:

خلاصه مقاله

تگ iframe در زبان نشانه گذاری HTML یک inline frame را مشخص می کند.

همیشه ویژگی title را مشخص کنید. (برای screen reader ها)

ویژگی های width و height مشخص می کنند که اندازه تگ iframe چقدر باشد.

برای حذف و تغییر border (حاشیه) یک تگ iframe از ویژگی border استفاده می کنیم.

نکته : استفاده از تگ iframe در استاندارهای سئو اصلا توصیه نمی شود

خب به پایان یکی دیگر از مقالات زبان نشانه گذاری HTML رسیدیم و کار با تگ iframe را یاد گرفتیم.

در مقاله بعدی به سراغ مبحث بسیار کاربردی استفاده از جاوااسکریپت (JavaScript) در HTML می پردازیم.