iframe در HTML؛ نمایش محتوا و ساخت قاب | درس 18

درس 18 از دوره 60 قسمتی آموزش HTML و CSS ارومیا دیزاین

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

برای شروع، درس 17 درباره صوت و ویدیو و درس 16 درباره دسترس پذیری را مرور کنید. سایر جلسات در دسته آموزش HTML و CSS قرار دارند.

iframe چیست و چه زمانی به کار می آید؟

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

<iframe src="preview.html"
        title="پیش نمایش صفحه معرفی فروشگاه نمونه"
        width="640" height="360"
        loading="lazy"></iframe>
<p><a href="preview.html">باز کردن صفحه معرفی فروشگاه نمونه</a></p>

در این نمونه باید فایل preview.html کنار فایل اصلی وجود داشته باشد. src نشانی صفحه مقصد است و width و height اندازه قاب را تعیین می کنند. تگ پایانی iframe را بنویسید. لینک مستقیم را بیرون قاب گذاشته ایم تا کاربر راه جداگانه ای برای دسترسی به محتوا داشته باشد. اگر مسیرها را فراموش کرده اید، درس 8 درباره نشانی های نسبی و مطلق را ببینید.

تفاوت iframe با video، img و لینک

مثلا اگر فایل project.mp4 را روی میزبانی خودتان دارید، نمونه video درس 17 مناسب است. اگر سرویس ویدیویی کد درج iframe می دهد، صفحه پخش کننده آن را درج می کنید. این دو مسیر یکسان نیستند. تصویر جلد یک فیلم نیز همچنان تصویر است؛ درس 9 درباره img به انتخاب درست در این حالت کمک می کند.

title؛ نام روشن برای محتوای قاب

عنوان iframe باید موضوع محتوای داخل آن را کوتاه توضیح دهد. «قاب» یا «ویدیو» به تنهایی کافی نیست؛ «فیلم معرفی امکانات فروشگاه نمونه» روشن تر است. این نام به کاربران فناوری های کمکی کمک می کند موضوع قاب را تشخیص دهند. title خود iframe با title سند داخل آن یکی نیست. بهتر است هر دو عنوان متناسب داشته باشند.

در پروژه این درس، صفحه والد عنوان «نمونه کارها» دارد و صفحه داخل قاب عنوان «معرفی فروشگاه نمونه». ویژگی iframe نیز پیش نمایش همین فروشگاه را توضیح می دهد. برای تفاوت اطلاعات head و محتوای body به درس 4 درباره ساختار سند HTML برگردید.

loading؛ بارگذاری فوری یا با تاخیر

مقدار eager درخواست بارگذاری فوری دارد و lazy برای قاب هایی که نزدیک محدوده دید می شوند مناسب است. lazy می تواند بارگیری اولیه قاب های پایین صفحه را به تعویق بیندازد؛ محتوای آنها را حذف نمی کند. زمان دقیق به رفتار مرورگر بستگی دارد و با غیرفعال بودن جاوااسکریپت ممکن است تعویق اعمال نشود. برای قاب اصلی و ضروری بالای صفحه، نیاز واقعی کاربر را در انتخاب در نظر بگیرید.

درج ویدیوی سرویس ها؛ نشانی عادی با نشانی درج فرق دارد

برای سرویس ویدیو، از گزینه اشتراک گذاری و دریافت کد درج همان سرویس استفاده کنید. مثلا قالب نشانی پخش کننده یوتیوب https://www.youtube.com/embed/VIDEO_ID است. VIDEO_ID باید با شناسه واقعی فیلم جایگزین شود؛ گذاشتن نشانی صفحه تماشای معمولی در src همان نتیجه را نمی دهد.

<!-- VIDEO_ID را با شناسه واقعی ویدیوی خود جایگزین کنید -->
<iframe src="https://www.youtube.com/embed/VIDEO_ID"
        title="فیلم معرفی امکانات فروشگاه نمونه"
        width="640" height="360"
        loading="lazy"
        allow="fullscreen"
        referrerpolicy="strict-origin-when-cross-origin"></iframe>
<p>
  <a href="https://www.youtube.com/watch?v=VIDEO_ID">
    مشاهده فیلم معرفی فروشگاه در یوتیوب
  </a>
</p>

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

چرا بعضی صفحه ها در iframe نمایش داده نمی شوند؟

سایت مقصد می تواند با سرآیندهای HTTP، درج شدن در قاب را محدود کند. X-Frame-Options با DENY درج را منع می کند و با SAMEORIGIN آن را به مبدا یکسان محدود می کند. دستور frame-ancestors در Content-Security-Policy نیز مشخص می کند چه مبداهایی می توانند صفحه را داخل قاب قرار دهند. اگر مرورگر درج را رد کرد، افزودن width یا عوض کردن title مشکل را حل نمی کند.

برای بررسی، نشانی را مستقیم باز کنید و پیام کنسول مرورگر را بخوانید. اگر سرویس، مسیر رسمی درج دارد از همان استفاده کنید؛ اگر اجازه درج نمی دهد، لینک مستقیم قرار دهید. تنظیم سمت سایت مقصد را از HTML صفحه خودتان نمی توانید تغییر دهید. در پروژه دوصفحه ای خودتان، در صورت محدودیت سرور باید تنظیم همان میزبانی را بررسی کنید.

sandbox و allow را آگاهانه تنظیم کنید

sandbox محدودیت هایی برای سند داخل قاب اعمال می کند. مقدار خالی محدودیت های آن را فعال می کند؛ توکن هایی مانند allow-scripts یا allow-forms بخشی از قابلیت ها را باز می کنند. برای پیش نمایش ایستای این درس، sandbox خالی کافی است چون صفحه فقط متن دارد و به اسکریپت یا ارسال فرم نیاز ندارد. برای یک پخش کننده بیرونی، همین محدودیت می تواند عملکرد را مختل کند.

<iframe src="preview.html"
        title="پیش نمایش ایستای فروشگاه نمونه"
        sandbox=""
        width="640" height="360"></iframe>

allow تنظیم جداگانه ای برای قابلیت هایی مثل تمام صفحه است و با sandbox یکی نیست. ترکیب allow-scripts و allow-same-origin برای محتوای هم مبدا می تواند حفاظت sandbox را تضعیف کند؛ مجوزهای اضافی را بدون نیاز واقعی کپی نکنید. referrerpolicy نیز اطلاعات ارجاع ارسال شده را کنترل می کند، نه اجازه درج صفحه مقصد را. در این درس وارد طراحی محتوای تعاملی ناشناس نمی شویم؛ هدف شناخت نقش ویژگی هاست.

پروژه عملی؛ دو فایل مستقل بسازید

پوشه ای به نام iframe-demo بسازید و دو فایل index.html و preview.html در آن قرار دهید. پوشه بندی را مانند درس 3 درباره اولین پروژه وب انجام دهید. ابتدا preview.html را بسازید:

<!doctype html>
<html lang="fa" dir="rtl">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>معرفی فروشگاه نمونه</title>
</head>
<body>
  <main>
    <h1>فروشگاه نمونه</h1>
    <p>این صفحه، پیش نمایش متنی یک نمونه کار است.</p>
    <h2>امکانات اصلی</h2>
    <ul>
      <li>نمایش محصولات</li>
      <li>معرفی دسته بندی ها</li>
      <li>نمایش اطلاعات تماس</li>
    </ul>
  </main>
</body>
</html>

سپس در index.html، صفحه نمونه کارها را بنویسید. iframe داخل بخش همان پروژه قرار می گیرد و لینک مستقیم آن هم زیر قاب دیده می شود. این ساختار، ادامه درس 15 درباره main و section است.

<!doctype html>
<html lang="fa" dir="rtl">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>نمونه کارهای طراحی سایت | شرکت نمونه</title>
</head>
<body>
  <header><p>شرکت نمونه</p></header>
  <main>
    <h1>نمونه کارهای طراحی سایت</h1>
    <section aria-labelledby="shop-title">
      <h2 id="shop-title">پروژه فروشگاه نمونه</h2>
      <p>پیش نمایش متنی امکانات این پروژه را ببینید.</p>
      <iframe src="preview.html"
              title="پیش نمایش امکانات فروشگاه نمونه"
              width="640" height="360"
              loading="lazy" sandbox=""></iframe>
      <p><a href="preview.html">باز کردن معرفی فروشگاه در صفحه مستقل</a></p>
    </section>
  </main>
  <footer><p>شرکت نمونه؛ طراحی و توسعه وب</p></footer>
</body>
</html>

index.html را باز کنید؛ باید عنوان اصلی صفحه و سند preview.html داخل قاب را ببینید. سپس لینک مستقیم را بزنید و تفاوت مشاهده در قاب با مشاهده مستقل را مقایسه کنید. عرض ثابت این تمرین ممکن است روی گوشی بزرگ باشد؛ تنظیم اندازه واکنش گرا را در بخش CSS دوره انجام خواهیم داد.

بررسی نتیجه و اشتباه های رایج

• قاب خالی است: وجود preview.html و املای مسیر را بررسی کنید.
• صفحه مقصد منع درج دارد: پیام مرورگر و مسیر رسمی درج را بررسی کنید.
• عنوان مبهم است: نام پروژه یا محتوای واقعی را در title بنویسید.
• صفحه داخل قاب اسکرول دارد: اندازه قاب و طول سند را بررسی کنید؛ iframe با ارتفاع خودکارِ متن یک div یکسان نیست.
• دکمه های سرویس کار نمی کنند: مجوزها و محدودیت sandbox را با مستندات سرویس مقایسه کنید.
• فقط قاب را گذاشته اید: توضیح کوتاه و لینک مستقیم را هم در صفحه والد اضافه کنید.

تمرین درس 18

یک فایل دوم به نام company-preview.html بسازید که نام شرکت و یک پاراگراف معرفی دارد. در صفحه اصلی یک بخش با عنوان «معرفی شرکت» اضافه کنید و این فایل را با عنوان توصیفی، sandbox خالی و لینک مستقیم نشان دهید. اندازه قاب را 600 در 240 قرار دهید.

<section aria-labelledby="company-title">
  <h2 id="company-title">معرفی شرکت</h2>
  <iframe src="company-preview.html"
          title="پیش نمایش معرفی شرکت نمونه"
          width="600" height="240"
          loading="lazy" sandbox=""></iframe>
  <p><a href="company-preview.html">خواندن معرفی شرکت در صفحه مستقل</a></p>
</section>

منابع مطالعه

مرجع iframe در MDN، استاندارد HTML درباره قاب ها و راهنمای رسمی پخش کننده درج شده یوتیوب.

درس قبلی: صوت و ویدیو در HTML | درس 17