فریمهای داخلی در HTML
جلسهٔ YouTube یک دستور پخت معروف iframe برای پخشکنندهٔ میزبانیشده بود. این جلسه به ایدهٔ کلی برمیگردد: قاب داخلی سند HTML دیگری را داخل مستطیل روی صفحه نشان میدهد — نقشه، سند، داشبورد، ویجت راهنما، یا صفحهٔ محلی کوچکی که خودتان نوشتید. محدود به میزبان ویدیو نیستید. یک زمینهٔ مرور تودرتو با URL، ناحیهٔ اسکرول و (اغلب) اسکریپت خودش را قاب میکنید. YouTube را مورد خاص همین عنصر بدانید، نه تنها دلیل وجود iframe.
iframe چه میکند؟
iframe از مرورگر میخواهد سند دوم را بار کند و داخل فضای رزروشده روی صفحهٔ والد بکشد. بازدیدکننده هنوز عنوانها، پاراگرافها و ناوبری شما را دور قاب میبیند، اما کلیک، اسکرول، فرم و اسکریپت داخل قاب معمولاً مال صفحهٔ تودرتوست. برای دمو و ابزاری که از صفر نمیسازید قدرتمند است — و اگر روی صفحهٔ مبتدی خیلی قاب سنگین شخصثالث بچینید پرهزینه. ذهنی سند والدی که مینویسید را از سند فرزندی که قاب بار میکند جدا کنید.
پاسخ مستقیم
از <iframe src="https://example.com/page" title="Description" width="600" height="400"></iframe> استفاده کنید. src آدرس صفحهٔ تودرتو است (راهدور یا فایل نسبی محلی). title قاب را برای دسترسپذیری نام میگذارد. عرض و ارتفاع فضا رزرو میکنند تا محتوای اطراف هنگام ظاهر شدن صفحهٔ تودرتو نپرد. هر سایتی جاسازی را اجازه نمیدهد؛ بسیاری با هدر از قاب شدن خودداری میکنند. وقتی جاسازی کامل لازم نیست، پیوند عادی اغلب واضحتر، سبکتر و دیباگپذیرتر است.
جاسازی یا فقط پیوند؟
📊 چه وقت مبتدی جاسازی کند یا پیوند بدهد
| Situation | Prefer | Why |
|---|---|---|
| بازدیدکننده باید UI تودرتو را درجا لمس کند | iframe | ابزار روی صفحه میماند |
| فقط باید منبع را باز کند | پیوند عادی | سبکتر، واضحتر، غافلگیری قاب کمتر |
| سایت هدف قاب را مسدود میکند | پیوند (یا صفحهٔ خودتان) | قاب خالی وقت تلف میکند |
| صفحهٔ کمکی محلی کوچک دارید | iframe به child.html | تمرین امن بدون مسدودسازی شخصثالث |
پیشنمایش سادهٔ راهدور
الگوی ساده صفحهای عمومی را بار میکند که جاسازی را اجازه میدهد (یا اگر ندهد صادقانه شکست میخورد). همیشه title معنادار بگذارید.
Basic iframe
html<iframe
src="https://example.com"
title="Example site preview"
width="600"
height="400">
</iframe>خواندن نمونهٔ پایه
srcبه URL سند تودرتو اشاره میکندtitleنام دسترسپذیر قاب است — عادت لازم، نه تزئینwidthوheightفضا رزرو میکنند تا متن اطراف هنگام رسم صفحهٔ تودرتو وحشیانه نپرد- اگر قاب خالی ماند، هدف ممکن است جاسازی را مسدود کند؛ اغلب سیاست است، نه برچسب خراب یا مسیر پوشهٔ غلط
- جاسازی YouTube یک کاربرد تخصصی همین عنصر با شکل URL جاسازی از Share → Embed است
- قاب خالی زود درس مفیدی میدهد: کنترل جایی تمام میشود که قوانین سایت دیگر شروع میشود
تمرین با صفحهٔ فرزند محلی
برای تمرین مطمئن، کنار صفحهٔ والد یک child.html کوچک بسازید و همان را قاب کنید. هر دو طرف دست شماست، پس سایت خارجی جاسازی را مسدود نمیکند. این امنترین راه یادگیری عنصر است قبل از تعقیب جاسازیهای شخصثالثی که ممکن است ظاهر نشوند.
Local child iframe
html<iframe
src="child.html"
title="Local practice page"
width="480"
height="240">
</iframe>خواندن نمونهٔ محلی
src="child.html"نسبی فایلی کنار والد را بار میکند (همان قواعد مسیر تصویر و اسکریپت)- داخل
child.htmlعنوان و پاراگراف کوتاه بگذارید تا محتوا دیده شود - متن فرزند را عوض کنید، والد را تازهسازی کنید، و بهروز شدن قاب را ببینید
- این الگو عنصر را بدون وابستگی به فهرست اجازهٔ شخصثالث میآموزد
جاسازی YouTube در برابر iframe عمومی
دیالوگ Share → Embed یوتیوب راه هدایتشدهای برای پر کردن iframe پخشکننده با URL جاسازی درست است. iframe عمومی همان عنصر را برای هر URL مجاز بهکار میبرد: نمایشگر سند، نقشه، صفحهٔ کمکی خودتان و بیشتر. عادتهای جلسهٔ YouTube (title، اندازهٔ معقول، URL رسمی وقتی لازم است) را نگه دارید و قضاوت گستردهتر این جلسه را اضافه کنید: فقط وقتی تعامل درجا مهم است جاسازی کنید، و وقتی نیست به پیوند عادی برگردید. دانستن هم دستور پخت خاص و هم عنصر کلی جلوی برخورد ذهنی درسهای رسانه و چیدمان را میگیرد.
امنیت و عملکرد در سطح مبتدی
هر iframe سند دیگری برای بارگذاری، quirk اسکرول بیشتر، و جایی دیگر برای اجرای احتمالی اسکریپت شخصثالث اضافه میکند. ویژگیهای پیشرفته مثل sandbox میتوانند کار صفحهٔ تودرتو را محدود کنند — بعد از اینکه جاسازی و عنوان را مطمئن یاد گرفتید بهعنوان موضوع بعدی بگذارید. فعلاً سه قاعدهٔ مبتدی: بالای هر پاراگراف پشتهٔ iframe سنگین نچینید؛ وقتی خروج کافی است پیوند را ترجیح دهید؛ و فرض نکنید قاب خالی یعنی برچسب HTML خراب است وقتی هدف فقط از قاب شدن خودداری میکند. پرسیدن «آیا این جاسازی وزنش را درمیآورد؟» بخشی از نوشتن صفحهٔ واضح است.
عادت دسترسپذیری
هر iframe را با title واضحی نام بگذارید که محتوای تودرتو را بگوید («نقشهٔ دوره»، «صفحهٔ تمرین محلی»)، نه «frame1» یا رشتهٔ خالی. جاسازی را با جملهٔ کوتاه معرفی کنید تا کاربر صفحهکلید و صفحهخوان بداند چرا قبل از ورود به ناحیهٔ قاب آنجا است. اگر صفحهٔ تودرتو مادهٔ ضروری درس است، پیوند عادی برای باز کردن تمامصفحه هم بگذارید. دسترسپذیری قاب دربارهٔ نامگذاری و زمینه است، نه وانمود کردن که والد و فرزند یک سند واحدند.
تمرین در ویرایشگر
child.htmlبا یک عنوان و یک پاراگراف تمرین بسازید.- در صفحهٔ والد با
iframe،titleواضح و عرض/ارتفاع معتدل جاسازی کنید. - والد را محلی باز کنید و ظاهر شدن محتوای فرزند داخل مستطیل را تأیید کنید.
- اختیاری URL راهدور امتحان کنید؛ اگر خالی ماند به فرزند محلی برگردید و توجه کنید سیاست — نه برچسب گمشده — ممکن است علت باشد.
- پیوند عادی به همان URL فرزند اضافه کنید و تجربه را با نسخهٔ قابشده مقایسه کنید.
- بالای قاب یک جمله بنویسید که بازدیدکننده چه میبیند، بعد دوباره چک کنید
titleبا آن توصیف جور است.
اشتباهات آسان
- نبود
titleروی iframe - فرض اینکه هر سایت خارجی داخل قاب شما بار میشود
- تودرتو کردن خیلی iframe سنگین در یک صفحه
- قاطی کردن «URL را در پاراگراف پیوند دادم» با «قاب جاسازی کردم»
- تلقی جاسازی مسدودشدهٔ راهدور بهعنوان مسیر
srcخراب وقتی علت سیاست است - فراموش کردن که جاسازی YouTube فقط یک دستور پخت iframe است، نه کل عنصر
خلاصه
iframeصفحهٔ دیگر (یا سند سازگار) را باsrcجاسازی میکند- همیشه
titleواضح بگنجانید - سایت هدف میتواند جاسازی را مسدود کند
- وقتی تعامل درجا لازم نیست پیوند عادی را ترجیح دهید
- قبل از تکیه به صفحات شخصثالث با
child.htmlمحلی امن تمرین کنید
🧠 دانش خود را بیازمایید
دانش خود را بیازمایید
خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کردهاید
📝 دستورالعملها
- هر سوال را با دقت بخوانید
- بهترین پاسخ را برای هر سوال انتخاب کنید
- میتوانید آزمون را هر چند بار که میخواهید تکرار کنید
- پیشرفت شما در بالا نمایش داده میشود