فریم‌های درون خطی HTML

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

iframe چیست؟

فریم‌های درون خطی HTML یا iframe مخفف Inline Frame است و به معنی قاب درون خطی می‌باشد. به عبارت دیگر، با استفاده از iframe می توانید یک پنجره کوچک درون صفحه خود ایجاد کنید و هر محتوایی که می خواهید، مانند یک وب سایت، یک ویدیو، یک نقشه یا یک فرم، را در آن نمایش دهید.

برای قرار دادن iframe در صفحه خود ، باید از تگ <iframe> استفاده کنید:

<iframe src = "page_URL"> </iframe>

درست مانند یک لینک فوق العاده ، URL صفحه ای که می خواهید اضافه کنید باید در ویژگی src تعریف شود. این ویژگی باید در کد iframe لحاظ شود تا مطابق هدف کار کند.

بعد از استفاده از <frame> ، عنصر iframe در HTML5 معرفی شد. شما باید از آن برای نمایش یک صفحه وب در داخل یک صفحه وب دیگر استفاده کنید:

<iframe src="https://cdn.bitdegree.org/learn/test-iframe.htm" width="90%" height="300px"></iframe>

به طور پیش فرض ، هر iframe HTML با حاشیه ای در اطراف خود نمایش داده می شود. با این حال ، می توانید اندازه ، سبک و رنگ آن را تغییر دهید یا حاشیه را کاملاً با استفاده از ویژگی حاشیه CSS حذف کنید:

<iframe src="https://cdn.bitdegree.org/learn/test-iframe.htm" style="border: none;"></iframe>

کاربردهای iframe

با استفاده از iframe می توانید یک پنجره کوچک درون صفحه خود ایجاد کنید و هر محتوایی که می خواهید، مانند یک وب سایت، یک ویدیو، یک نقشه یا یک فرم، را در آن نمایش دهید. در ادامه برخی از کاربردهای iframe را آورده‌ایم.

1. نمایش محتوای وب سایت های دیگر:

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

2. جاسازی ویدیو:

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

3. نمایش نقشه:

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

4. ایجاد فرم های تعاملی:

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

5. نمایش محتوای پویا:

• می‌توانید از iframe برای نمایش محتوای پویا که با JavaScript یا سایر زبان های برنامه نویسی وب ایجاد می‌شود، استفاده کنید.
• این کار می‌تواند برای نمایش نمودارها، جداول، چت‌های زنده یا سایر محتوای تعاملی مفید باشد.
• به عنوان مثال، می‌توانید از iframe برای نمایش یک نمودار سهام یا یک چت زنده با پشتیبانی مشتری در صفحه خود استفاده کنید.

نکات مهم در استفاده از iframe:

• از iframe فقط برای نمایش محتوای معتبر و قابل اعتماد استفاده کنید.
• از صفات src و sandbox برای ایمن سازی iframe خود استفاده کنید.
• از iframe برای نمایش محتوایی که قبلاً در صفحه خود دارید استفاده نکنید.
• از iframe برای نمایش محتوایی که کاربر انتظار دیدن آن را در صفحه شما ندارد، استفاده نکنید.

مزایای استفاده از iframe:

• قابلیت انعطاف پذیری: iframe به شما امکان می‌دهد تا محتوای مختلف را از منابع مختلف در یک صفحه وب واحد نمایش دهید.
• کنترل محتوا: می‌توانید ظاهر و عملکرد iframe را با استفاده از CSS و JavaScript کنترل کنید.
• جدا سازی محتوا: iframe محتوای درون خود را از محتوای صفحه اصلی جدا می‌کند، که می‌تواند برای امنیت و حریم خصوصی مفید باشد.

معایب استفاده از iframe:

• مشکلات سئو: محتوای درون iframe ممکن است به طور کامل توسط موتورهای جستجو ایندکس نشود.
• مشکلات دسترسی: iframe می‌تواند برای افراد دارای معلولیت که از فناوری کمکی استفاده می‌کنند، مشکل ایجاد کند.
• مشکلات امنیتی: iframe می‌تواند برای تزریق کدهای مخرب و سایر حملات امنیتی استفاده شود.

نکات مهم در استفاده از iframe:

• از iframe فقط برای نمایش محتوای معتبر و قابل اعتماد استفاده کنید.
• از صفات src و sandbox برای ایمن سازی iframe خود استفاده کنید.
• از iframe برای نمایش محتوایی که قبلاً در صفحه خود دارید استفاده نکنید.
• از iframe برای نمایش محتوایی که کاربر انتظار دیدن آن را در صفحه شما ندارد، استفاده نکنید.

ویژگی های iframe HTML

ویژگی src URL (آدرس وب) صفحه را در صورت قرار دادن iframe مشخص می کند. همچنین می‌تواند به یک سند HTML ارجاع دهد:

<iframe src="https://cdn.bitdegree.org/learn/test-iframe.htm">This text is shown if iframe is not supported.</iframe>

ویژگی width عرض iframe HTML را تنظیم می‌کند در حالی که height ارتفاع را تعیین می‌کند. به طور پیش فرض ، این مقادیر در پیکسل تنظیم می‌شوند ، اما اگر از نماد درصد استفاده کنید ، می‌توان آن ها را نیز در درصد تنظیم کرد:

<iframe src="https://cdn.bitdegree.org/learn/test-iframe.htm" width="90%" height="300px"></iframe>

ویژگی اختیاری نام یک نام برای عنصر iframe تنظیم می‌کند:

<iframe src="https://cdn.bitdegree.org/learn/test-iframe.htm" name="iframe_tutorial"></iframe>‌

نکات مهم فریم‌های درون خطی HTML

• از مثال‌های خوب استفاده از iframe می‌تواند تعبیه یک قطعه کد ، شی im چندرسانه‌ای (مانند یک ویدیو) یا یک برنامه از شخص ثالث باشد.
• شما می‌توانید یک عنصر <p> را درون تگ <iframe> لانه کنید تا متنی را برای نمایش در صورت عدم پشتیبانی مرورگر از iframes فراهم کنید.