فصل ۲۱ | تعامل و ساختار پیشرفته

جای دادن یک صفحه داخل صفحه‌ی دیگر

عنصر <iframe> یک صفحه‌ی HTML مستقل را به‌صورت یک قاب (پنجره‌ی کوچک) داخل صفحه‌ی فعلی نمایش می‌دهد. این ابزار معمولاً برای نمایش نقشه، ویدئوی خارجی یا محتوای یک سایت دیگر به‌کار می‌رود.

iframe-basic.html
<iframe src="page.html" title="توضیح قاب"></iframe>

تعیین اندازه

مثل تصویر، اندازه‌ی قاب هم با width و height (یا CSS) قابل تنظیم است. بدون تعیین اندازه، مرورگر یک اندازه‌ی پیش‌فرض کوچک برای آن در نظر می‌گیرد.

iframe-size.html
<iframe src="map.html" width="600" height="400" title="نقشه"></iframe>

استفاده از iframe به‌عنوان مقصد لینک

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

iframe-target.html
<iframe src="about.html" name="content-frame" title="محتوا"></iframe>

<a href="contact.html" target="content-frame">تماس با ما</a>
نکته: ویژگی title روی iframe برای دسترسی‌پذیری اهمیت دارد؛ همچنین بهتر است فقط از منابع معتبر و مورد اعتماد داخل iframe استفاده کنید، چون این عنصر می‌تواند نگرانی‌های امنیتی هم به‌همراه داشته باشد.