چارچوب درون صفحه ای (iframe)
تگ «iframe» یک «چارچوب درون صفحه ای (Inline Frame)» می سازد. یعنی یک سند دیگر را داخل همین صفحه نمایش می دهیم. اول معنی را بگیریم، سپس نمونه را ببینیم، بعد نکات مهم را یاد می گیریم.
تعریف و کاربرد iframe
طبق منبع، «iframe» یک قاب درون صفحه است. این قاب، یک آدرس «src» می گیرد و همان صفحه را داخل سند فعلی نشان می دهد.
نکته: همیشه ویژگی «title» را بنویس. خواننده صفحه خوان، محتوای قاب را بهتر معرفی می کند.
نمونه ساده
<iframe src="https://www.w3schools.com" title="W3Schools Free Online Web Tutorials"></iframe>
ویژگی های کلیدی
- width و height: اندازه قاب را مشخص می کند.
- loading: بارگذاری «lazy» یا «eager» را تعیین می کند.
- sandbox: محدودیت های امنیتی اضافه می کند.
- referrerpolicy: اطلاعات ارجاع را کنترل می کند.
هشدار: برای محتوای ناشناس، از «sandbox» استفاده کن. این کار، خطر اسکریپت های مخرب را کم می کند.
تنظیمات پیش فرض CSS
مرورگرها معمولاً برای فوکوس iframe مرز نمی گذارند. قطعه زیر از منبع آمده است.
iframe:focus {
outline: none;
}
iframe[seamless] {
display: block;
}
تمرین گام به گام
- یک iframe با «src» دلخواه بساز.
- برای دسترس پذیری، «title» معنادار بده.
- ویژگی «loading» را «lazy» تنظیم کن.
- در صورت نیاز، «sandbox» را اضافه کن.
پیوندهای مرتبط
برای تگ های مجاور، صفحه مورب (i) و تصویر (img) را ببین.
جمع بندی سریع
- iframe سندی دیگر را داخل صفحه می آورد.
- نوشتن «title» بسیار مهم است.
- برای امنیت، از «sandbox» کمک بگیر.
- با «loading» می توان بارگذاری را بهینه کرد.