کتابخونه : بخوانیم و یاد بگیریم

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

ساختار کلی تگ iframe

<iframe src="url" width="600" height="400" frameborder="0" allowfullscreen></iframe>

توضیحات ویژگی‌های تگ iframe:

src: URL منبع یا آدرس صفحه‌ای که می‌خواهید در داخل iframe نمایش داده شود. این URL می‌تواند یک صفحه وب، ویدیو، نقشه یا هر محتوای دیگری باشد.
width و height: ابعاد iframe را مشخص می‌کند. شما می‌توانید این مقادیر را بر اساس نیاز خود تنظیم کنید.
frameborder: این ویژگی تعیین می‌کند که آیا iframe دارای حاشیه باشد یا خیر. مقدار 0 به این معناست که iframe بدون حاشیه خواهد بود.
allowfullscreen: این ویژگی به iframe اجازه می‌دهد که محتوا در حالت تمام‌صفحه (fullscreen) نمایش داده شود، مثل ویدیوهای YouTube.
name: این ویژگی به iframe یک نام می‌دهد که می‌تواند برای هدف‌های خاص مانند لینک‌دهی به داخل iframe یا باز کردن محتوا در یک iframe خاص استفاده شود.
sandbox: این ویژگی برای محدود کردن قابلیت‌های iframe استفاده می‌شود، مانند جلوگیری از اجرا کردن اسکریپت‌ها، ارسال فرم‌ها و غیره.

مثال‌های مختلف استفاده از تگ iframe:

1. نمایش یک صفحه وب داخل iframe

<iframe src="https://www.example.com" width="600" height="400" frameborder="0"></iframe>

در این مثال، صفحه وب https://www.example.com داخل iframe به ابعاد 600x400 نمایش داده می‌شود.

2. نمایش یک ویدیو از YouTube

برای جاسازی ویدیوهای YouTube، می‌توانید از لینک اشتراک‌گذاری ویدیو استفاده کنید و آن را در داخل تگ iframe قرار دهید.

<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

در این مثال، ویدیوی YouTube با ابعاد 560x315 داخل iframe نمایش داده می‌شود.

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

برای جاسازی نقشه Google، می‌توانید از کد جاسازی ارائه‌شده توسط Google Maps استفاده کنید.

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3153.225547515544!2d144.9537363153159!3d-37.81720997975156!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6ad65d5e7d907e11%3A0x5045675218ce710!2zNDDwn5iP!5e0!3m2!1sen!2sus!4v1651072554174" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>

در این مثال، نقشه Google به‌صورت جاسازی شده داخل صفحه وب نمایش داده می‌شود.

4. استفاده از ویژگی sandbox برای محدود کردن قابلیت‌های iframe

<iframe src="https://www.example.com" width="600" height="400" sandbox="allow-scripts allow-same-origin"></iframe>

در این مثال، iframe محدود به اجرای اسکریپت‌ها و دسترسی به محتوای خود منبع (مانند کوکی‌ها و داده‌ها) است. این ویژگی می‌تواند به شما کمک کند تا امنیت iframe را افزایش دهید.

5. استفاده از ویژگی allowfullscreen برای نمایش ویدیوها در حالت تمام‌صفحه

<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" width="560" height="315" frameborder="0" allowfullscreen></iframe>

در این مثال، ویدیو می‌تواند در حالت تمام‌صفحه نمایش داده شود.

ویژگی‌های اضافی تگ iframe:

loading: ویژگی loading می‌تواند برای بهبود عملکرد صفحه استفاده شود. اگر مقدار آن را به lazy تنظیم کنید، iframe فقط زمانی بارگذاری می‌شود که نزدیک به مشاهده کاربر باشد، نه زمانی که صفحه بارگذاری می‌شود.

<iframe src="https://www.example.com" width="600" height="400" loading="lazy"></iframe>

نتیجه‌گیری:

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