1️⃣ تعریف

تگ <iframe> مخفف Inline Frame هست.
با این تگ می‌تونیم یک صفحه وب یا محتوای خارجی (مثل ویدئو، نقشه، سایت دیگه) رو داخل صفحه خودمون نمایش بدیم.

2️⃣ سینتکس کلی

<iframe src="URL" width="عرض" height="ارتفاع"></iframe>

• src → آدرس صفحه یا منبعی که می‌خوایم نمایش داده بشه.

• width / height → اندازه قاب (به پیکسل یا درصد).

3️⃣ مثال ساده

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

👉 این کد سایت example.com رو داخل صفحه ما نشون میده.

4️⃣ ویژگی‌های مهم iframe

• title → برای دسترس‌پذیری و سئو خوبه.

<iframe src="https://www.example.com" title="نمونه سایت"></iframe>

• frameborder → تعیین می‌کنه قاب اطراف iframe نمایش داده بشه یا نه. (قدیمی – بهتره با CSS کنترل بشه)

<iframe src="page.html" frameborder="0"></iframe>

• allowfullscreen → اجازه میده محتوا (مثل ویدئو) تمام صفحه بشه.

<iframe src="video.html" allowfullscreen></iframe>

• loading="lazy" → باعث میشه iframe فقط وقتی بارگذاری بشه که کاربر به اون بخش اسکرول کنه (بهینه‌سازی سرعت سایت).

<iframe src="map.html" loading="lazy"></iframe>

5️⃣ کاربردهای متداول

1. ویدئو از YouTube

<iframe width="560" height="315"
  src="https://www.youtube.com/embed/ScMzIvxBSi4"
  title="ویدئو نمونه"
  frameborder="0"
  allowfullscreen>
</iframe>

2. نمایش نقشه گوگل

<iframe
  src="https://www.google.com/maps/embed?pb=!1m18!..."
  width="600"
  height="450"
  style="border:0;"
  allowfullscreen=""
  loading="lazy">
</iframe>

6️⃣ نکته مهم امنیتی

گاهی iframe می‌تونه خطرناک باشه چون محتوای خارجی داخل سایتت نمایش میده.
برای امنیت بیشتر می‌تونیم از ویژگی sandbox استفاده کنیم:

<iframe src="page.html" sandbox></iframe>

این کار دسترسی‌های iframe رو محدود می‌کنه.

👉 خلاصه:

• iframe = نمایش یک صفحه یا محتوا داخل صفحه دیگه.

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