اهمیت و کاربرد تگ iframe در HTML

در این مقاله در مورد تگ iframe در HTM صحبت خواهیم کرد و خواهیم دانست که آی فریم چیست؟ چه کاربردی دارد و نحوه استفاده از آن چگونه است. با ما همراه باشید تا به سینتکس (Syntax) یا نحوه بکارگیری iframe، نکات مهم مربوط به آن، Attributeها و سایر موارد مربوط به این تگ آشنا شویم. در این مقاله فرض بر این است که شما آشنایی کافی با HTML و CSS دارید.

تگ آی فریم (iframe) چیست؟

Iframe در HTML مخفف عبارت Inline Frame است. با استفاده از این تگ می‌توانیم یک فضای مستطیلی درون صفحه وب ایجاد کنیم که در آن می‌توانیم یک صفحه وب یا فایل HTML دیگر را نمایش دهیم. بنابراین اگر بخواهیم در یک جمله بگوییم که "iframe چیست" باید گفت که:

iFrame یک تگ HTML است که با استفاده از آن می‌توانیم در یک صفحه وب، صفحه وب یا فایل HTML دیگری را نمایش دهیم.

کاربرد تگ iframe در HTML چیست؟

یک تگ Iframe به منظور قرار دادن یک فایل HTML درون یک فایل HTML دیگر استفاده می‌‌شود. به عبارت ساده‌تر کاربرد تگ iframe نمایش یک صفحه وب درون یک صفحه وب دیگر است. به طور مثال در صفحه همین مقاله می‌توانیم یک مقاله دیگر یا صفحه اصلی سایت وب 24 را نمایش دهیم. بیشترین کاربرد iframe را می‌توان در قرار دادن تبلیغات در صفحات، قرار دادن ویدیوی سایت‌های دیگر در صفحات و قرار دادن نقشه در صفحه وب دانست. گاهی اوقات می‌خواهیم یک محتوا مانند یک نمودار را در صفحه قرار دهیم به طوری که کاربر وبسایت بتواند آن را تغییر دهد و اقداماتی روی آن انجام دهد (مثلاً بتواند نمودار را کوچک یا بزرگ کند یا یک بازه خاص را انتخاب کند)؛ در این صورت نیز از آی فریم استفاده می‌‌شود. به این نوع محتوا، محتوای تعاملی گفته می‌‌شود چون کاربر می‌تواند در آن تغییراتی دهد.

صفحه "تماس با ما" در وبسایت‌ها را در نظر بگیرید که معمولاً در آن مکان شرکت روی نقشه نمایش داده می‌‌شود. در این صفحه شما می‌توانید نقشه را زوم کنید، مکان آن را با موس تغییر دهید یا در برخی موارد یک مکان دیگر را انتخاب کنید. به طور مثال، در صفحه "تماس با ما" وبسایت وب24 یک نقشه وجود دارد، این نقشه در واقع وبسایت گوگل مپ (نقشه گوگل) را در یک صفحه وب 24 نمایش می‌دهد، به همین سادگی.

بیشتر بخوانید: متا تگ robots چیست و چه کاربردی در سئو دارد؟

معایب استفاده از آی فریم (iframe) چیست؟

تگ iframe یک قابلیت جذاب است و می‌تواند گاهی اوقات بسیار کاربردی باشد و حتی گاهی اوقات نیاز داریم که حتماً از آی فریم استفاده کنیم. اما معایب استفاده از آی فریم باعث شده است که کارشناسان توصیه کنند که تنها در صورت نیاز و به صورت حداقلی آن را بکار گیریم. در ادامه به معایب استفاده از iframe در صفحات وبسایت می‌پردازیم:

iframe ریسک های امنیتی دارد

اگر شما در وبسایت خود یک iframe ایجاد کنید، سایت می‌تواند نسبت به حمله‌های Cross-Site آسیب‌پذیر شود. هکرها ممکن است URL صفحه نمایش داده شده در iframe را تغییر دهند و کدهای خودشان را به جای آن قرار دهند. به طور مثال ممکن است یک فرم در آن قرار دهند که اطلاعات وارد شده توسط کاربر را دریافت کرده و از آن سوءاستفاده کند. در هر صورت اگر کسی بتواند URL یا کدهای iframe را تغییر دهد، خطر بزرگی وبسایت و کاربران آن را تهدید خواهد کرد.

Iframe تجربه کاربری را مختل می‌کند

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

• ممکن است باعث شود دکمه بازگشت (Back) مرورگر غیرفعال شود
• کاربران دارای مشکلات بینایی که از Screen Reader استفاده می‌‌کنند را گیج می‌کند
• ممکن است باعث سردرگمی کاربران عادی شود و باعث شود اشتباهاً روی لینک‌های صفحه دیگر کلیک کنند
• شکل و طراحی محتوای آی فریم ممکن است با سایت ما خوانایی نداشته باشد و عجیب و غریب به نظر برسد
• ممکن است به دلیل تغییر URL در iframe چیزی در آن نمایش داده نشود که این مورد از نظر کاربر آزاردهنده است
• هر آی فریم باعث می‌‌شود فضای رم اشغال شود و CPU بیشتر کار کند، اگر سیستم کاربر ضعیف باشد ممکن است مشکلاتی برای آن به وجود بیاید

باعث ایجاد مشکلاتی در سئوی سایت می‌‌شود

گوگل توصیه می‌کند که تا حد امکان از ایجاد iframe خودداری کنید. اولاً که آی فریم باعث اختلال در تجربه کاربری می‌‌شود و ثانیاً گوگل نمی‌تواند محتوای موجود در iframe را ایندکس یا کرال کند. بنابراین گوگل توصیه کرده است که در صورت استفاده از iframe حتماً به صفحه‌ای که در iframe نشان داده می‌‌شود لینک داخلی متنی داده شود تا گوگل بتواند محتوای آن را خزش و ایندکس کند.

با توجه به معایب استفاده از آی فریم که در بالا به آن اشاره شد، ما توصیه می‌کنیم که تنها در صورت نیاز از آن استفاده کنید و استفاده از آن را به حداقل برسانید، به خصوص در صفحاتی که از نظر سئو برای ما اهمیت زیادی دارند. همچنین قبل از استفاده از آی فریم مطمئن شوید که سایت شما از امنیت کافی برخوردار است و کسی نمی‌تواند محتوای iframe را تغییر دهد.

برای این منظور می‌توانید از مقالات وب 24 در زمینه امنیت وبسایت و روش‌های جلوگیری از هک شدن سایت استفاده کنید.

بیشتر بخوانید: هک کردن سایت؛ روش های جلوگیری از هک کردن انواع سایت

نحوه استفاده از آی فریم (iframe) در HTML

سینتکس تگ iframe به صورت زیر است:

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

sre و title دو ویژگی (Attribute) مهم تگ آی فریم هستند. ویژگی src مربوط به آدرس صفحه وب یا فایلی است که می‌خواهیم در آی فریم نمایش داده شود. ویژگی title نیز یک عنوان برای iframe مشخص می‌کند. title اجباری نیست اما بهتر است حتماً از آن استفاده کنیم زیرا برای کسانی  که از Screen Reader استفاده می‌‌کنند بسیار مفید است.

در ویژگی src هم می‌توانیم URL صفحه هدف را قرار دهیم و هم آدرس فایل HTML که می‌خواهیم در آی فریم نمایش داده شود. این آدرس ها می‌توانند هم به صورت مطلق (Absolute) و هم به صورت نسبی (Relative) قرار داده شوند.

خدمات وب24: طراحی سایت فروشگاهی با وردپرس و یا کد نویسی اختصاصی

برای تعیین طول و عرض iframe از ویژگی‌های width و height استفاده می‌کنیم. می‌توان طول و عرض آی فریم را به صورت % نیز تعریف کرد. به طور مثال:

<iframe src="https://web24.ir/" height="200" width="300" title="Web24 Website adress"></iframe>

برای تعیین طول و عرض می‌توانیم از ویژگی style نیز به صورت زیر استفاده کنیم، با این تفاوت که در این روش باید از px نیز برای تعیین تعداد پیکسل استفاده کرد.

<iframe src="some-html-code.html" style="height:200px;width:300px;" title="Iframe Example"></iframe>

مرورگرهای وب به طور پیش‌فرض برای iframe یک کادر یا border قرار می‌دهند. برای حذف border می توانیم به صورت زیر عمل کنیم:

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

با استفاده از ویژگی style می‌توانیم رنگ، ضخامت و نوع border را به شکل دلخواه خود تغییر دهیم:

<iframe src="https://web24.ir/" style="border:2px solid red;" title=" Web24 Website adress"></iframe>

ویژگی‌ها یا Attributeهای مهم آی فریم:

علاوه بر این از ویژگی‌های عمومی مثل class، id، style و ... نیز می‌توان در تگ iframe استفاده کرد.

خدمات وب24: طراحی سایت وردپرس و کدنویسی

استفاده از iframe برای نمایش یک لینک در آن

می‌توان از آی فریم به این صورت استفاده کرد که با کلیک کاربر بر روی یک لینک، به جای باز شدن آن در یک صفحه دیگر، در کادر iframe نمایش داده شود. این یک قابلیت مهم است که در برخی موارد می‌تواند کاربردی باشد. برای این کار در تگ a که نشان‌دهنده یک لینک در HTML است، به جای ویژگی target نام iframe را قرار می‌دهیم. نام آی فریم را باید در ویژگی 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>

نکته: اگر بخواهیم از طریق جاوا اسکریپت در آی فریم تغییراتی ایجاد کنیم، ویژگی name باید حتماً برای آی فریم تعریف شود.

مرورگرهایی که از iframe پشتیبانی می‌‌کنند

می‌توان گفت تمام مرورگرهای امروزی از آی فریم پشتیبانی می‌‌کنند، اما به صورت دقیق‌تر مرورگرهای زیر از آن پشتیبانی می‌‌کنند:

• گوگل کروم (نسخه 1 و بالاتر)
• اینترنت اکسپلورر (تمام نسخه‌ها)
• موزیلا فایرفکس (تمام نسخه‌ها)
• مایکروسافت اج (نسخه 12 و بالاتر)
• اپرا (تمام نسخه‌ها)
• اپل سافاری (تمام نسخه‌ها)

جمع‌بندی

در این مقاله از وبلاگ وب24 در مورد این که iframe چیست، چه کاربردهایی دارد و چگونه می‌توان از آن استفاده کرد پرداختیم. همچنین با معایبی که استفاده از آی فریم می‌تواند به همراه داشته باشد، آشنا شدیم. همانطور که در بالا نیز اشاره شد، ما توصیه می‌کنیم که تا جای ممکن از این تگ استفاده نکنید، مگر در صفحاتی که از نظر سئو اهمیتی ندارند یا استفاده از آی فریم بتواند برای کاربران مفید واقع شود و برای آن‌ها ارزش افزوده‌ای ایجاد کند. با این وجود گاهی اوقات ما باید از آی فریم استفاده کنیم که در این صورت باید حتماً نکات امنیتی وبسایت را رعایت کنیم تا از مشکلات احتمالی جلوگیری کنیم.