جلسه چهل و نهم: آموزش کامل تگ iframe در HTML

به دوره حرفه‌ای آموزشHTML در آوای وب خوش اومدی! اینجا قراره تگ iframe رو مثل یه حرفه‌ای یاد بگیری! این تگ یکی از ابزارهای پرکاربرد HTML هست که به تو اجازه می‌ده یه صفحه وب، ویدئو، نقشه، یا هر محتوای خارجی دیگه رو مستقیم تو صفحه خودت جاسازی کنی. با <iframe> می‌تونی تجربه کاربری رو غنی‌تر کنی و محتوای پویا به سایتت اضافه کنی. تو این مقاله، از صفر تا صد تگ <iframe> رو با مثال‌های باحال، نکات خفن، ترفندهای امنیتی، سئو، و دسترسی‌پذیری یاد می‌گیری. آماده‌ای؟ بزن بریم!

تگ iframe چیه و چرا مهمه؟

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

• انعطاف‌پذیری بالا: از ویدئو و نقشه گرفته تا ابزارهای تعاملی، همه‌چیز رو می‌تونی جاسازی کنی.
• تجربه کاربری پویا: بدون نیاز به ترک صفحه، محتوا رو به کاربر نشون می‌دی.
• امنیت قابل تنظیم: با اتریبیوت‌هایی مثل sandbox، می‌تونی کنترل کنی چی تو <iframe> اجرا بشه.
• سئو غیرمستقیم: با بهبود تعامل کاربر و کاهش نرخ پرش، به رتبه‌بندی سایتت کمک می‌کنه.
• پشتیبانی گسترده: همه مرورگرهای مدرن مثل Chrome، Firefox، Safari، و Edge ازش پشتیبانی می‌کنن.

مثلاً، اگه بخوای یه ویدئوی یوتیوب یا یه نقشه گوگل رو تو صفحه‌ات بذاری، <iframe> بهترین دوستته!

🧱 ساختار تگ <iframe>: ساده اما قدرتمند!

تگ <iframe> یه تگ جفتیه که محتوای خارجی رو تو خودش نمایش می‌ده. ساختار پایه‌ای‌ش اینه:

<iframe src="https://example.com" width="600" height="400">
    مرورگر شما از iframe پشتیبانی نمی‌کنه. لطفاً از یه مرورگر مدرن استفاده کنید.
</iframe>

📌 اجزای اصلی:

• src: آدرس منبع خارجی (مثل URL یه صفحه وب).
• width و height: ابعاد فریم.
• محتوای داخل تگ: جایگزین (fallback) برای وقتی که <iframe> بارگذاری نشه.

📌 نکته: همیشه یه متن جایگزین بنویس تا اگه <iframe> کار نکرد، کاربر گمراه نشه.

🧩 اتریبیوت‌ها و تنظیمات پیشرفته تگ iframe

🧩 اتریبیوت src

این ویژگی آدرس صفحه‌ای رو که باید نمایش داده بشه رو مشخص می‌کنه.

🧩 اتریبیوت width و height

این ویژگی‌ها عرض و ارتفاع فریم رو تنظیم می‌کنه. مقادیر می‌تونن به صورت پیکسلی یا درصدی باشن.

🧩 اتریبیوت name

این ویژگی به فریم یک نام اختصاص می‌ده که برای ارسال داده‌ها یا باز کردن لینک‌ها در این فریم کاربرد داره.

<iframe src="https://example.com" name="myFrame"></iframe>

🧩 اتریبیوت allow

این ویژگی دسترسی به قابلیت‌های خاصی مانند پخش خودکار ویدیو یا استفاده از موقعیت مکانی رو کنترل می‌کنه.

<iframe src="https://example.com" allow="autoplay; geolocation"></iframe>

مقادیر این ویژگی:

1. autoplay: اجازه پخش خودکار رسانه‌ها.
2. camera: دسترسی به دوربین کاربر.
3. encrypted-media: اجازه استفاده از محتوای رسانه‌ای رمزگذاری شده.
4. fullscreen: اجازه نمایش فریم در حالت تمام‌صفحه.
5. geolocation: اجازه دسترسی به موقعیت مکانی کاربر.
6. microphone: دسترسی به میکروفون کاربر.
7. payment: اجازه استفاده از API پرداخت.
8. picture-in-picture: اجازه استفاده از حالت تصویر در تصویر برای ویدیوها.
9. clipboard-write: اجازه نوشتن در کلیپ‌بورد.

🧩 اتریبیوت sandbox

ویژگی sandbox امنیت بیشتری به فریم می‌ده و برخی از قابلیت‌ها را محدود می‌کنه.

مقادیر این ویژگی:

1. allow-forms: اجازه می‌ده که فرم‌ها درون iframe ارسال بشن. به طور پیش‌فرض، ارسال فرم‌ها غیرفعاله.
2. allow-scripts: اجازه می‌ده که اسکریپت‌ها (جاوااسکریپت) در iframe اجرا بشن. در حالت پیش‌فرض، اسکریپت‌ها غیرفعالن.
3. allow-same-origin: اجازه می‌ده که iframe دسترسی به داده‌ها و منابع همانند صفحه اصلی خود داشته باشه. این ویژگی به طور پیش‌فرض غیرفعاله، که باعث می‌شه iframe به عنوان یک منبع جداگانه (isolated) از نظر امنیتی عمل کنه.
4. allow-popups: اجازه می‌ده که پنجره‌های بازشو (popups) از داخل iframe باز بشن.
5. allow-modals: به iframe اجازه می‌ده که پنجره‌های مودال (مثل alert یا confirm) رو باز کنه.
6. allow-pointer-lock: اجازه می‌دهد که iframe از ویژگی قفل موس (pointer lock) استفاده کنه.
7. allow-top-navigation: به iframe اجازه می‌دهد که به صفحه والد (top-level) هدایت بشه (برای مثال، با استفاده از window.top).
8. allow-downloads: به iframe اجازه می‌ده که فایل‌ها را برای دانلود آماده کنه.
9. allow-payment-request: اجازه می‌ده که iframe درخواست‌های پرداخت (مثل API پرداخت مرورگر) رو ارسال کنه.

✏️ مثال:

<iframe src="https://example.com" allow="autoplay; geolocation; fullscreen"></iframe>

🧩 اتریبیوت loading

این ویژگی برای تعیین نحوه بارگذاری فریم استفاده می‌شه. مقادیر:

• lazy: فریم زمانی بارگذاری می‌شه که کاربر به اون نزدیک بشه.
• eager: فریم بلافاصله بارگذاری می‌شه.

✏️ مثال:

<iframe src="https://example.com" loading="lazy"></iframe>

🧩 اتریبیوت srcdoc

امکان تعیین محتوای HTML داخلی را مستقیماً درون آیفریم فراهم می‌کنه. این اتریبیوت زمانی کاربرد داره که بخوای بدون نیاز به بارگذاری یک صفحه خارجی، محتوایی رو مستقیماً درون آیفریم نمایش بدی و یا به هردلیلی محتوای داخل Iframe نشون داده نشد اون محتوای سفارشی نمایش داده بشه.

<iframe srcdoc="<h1>سلام دنیا!</h1><p>این یک آیفریم با محتوای داخلی است.</p>"></iframe>

🧩 اتریبیوت referrerpolicy

این ویژگی نحوه ارسال اطلاعات Referrer رو تعیین می‌کنه.

مقادیر مختلف این اتریبیوت:

1. no-referrer: هیچ اطلاعات ارجاعی ارسال نمی‌شه. به عبارت دیگه، هیچ URL ای از صفحه مبدأ برای درخواست‌های منابع فرستاده نمی‌شن.
2. no-referrer-when-downgrade: اطلاعات ارجاعی ارسال نمی‌شه مگر در مواردی که به یک منبع با سطح ایمنی پایین‌تر (مثلاً از HTTPS به HTTP) هدایت بشی. این مقدار پیش‌فرضه.
3. origin: تنها نام دامنه و پروتکل از URL مبدأ (بدون مسیر یا پارامترها) ارسال می‌شن. به عنوان مثال، اگر صفحه شما از https://example.com/page بارگذاری بشه، فقط https://example.com به عنوان ارجاع ارسال می‌شه.
4. origin-when-cross-origin: اطلاعات ارجاع کامل (شامل مسیر و پارامترها) تنها در صورتی ارسال می‌شن که درخواست از همان origin باشد (همان دامنه و پروتکل). در غیر این صورت، فقط نام دامنه و پروتکل ارسال می‌شه.
5. same-origin: اطلاعات ارجاع تنها زمانی ارسال می‌شه که درخواست از همان origin باشه (همان دامنه، پروتکل و پورت).
6. strict-origin: مانند origin هست، اما فقط زمانی که درخواست از یک اتصال امن (HTTPS) به یک اتصال امن ارسال بشه، اطلاعات ارجاع ارسال می‌شن.
7. strict-origin-when-cross-origin: مشابه origin-when-cross-origin هست، اما تنها در صورتی که درخواست از یک اتصال امن (HTTPS) به یک اتصال امن ارسال بشه، اطلاعات ارجاع ارسال می‌شن.
8. unsafe-url: تمام اطلاعات ارجاع (شامل URL کامل) همیشه ارسال می‌شه، حتی اگر به یک منبع غیرامن (HTTP) هدایت بشه. این گزینه ممکنه به دلیل مشکلات امنیتی توصیه نمیشه.

<iframe src="https://example.com" referrerpolicy="no-referrer"></iframe>

در این مثال، هنگام کلیک روی لینک، هیچ اطلاعات ارجاعی ارسال نمیشه.

📌 نکته:
استفاده از referrerpolicy به امنیت و حریم خصوصی کمک می‌کنه، زیرا می‌تونی از افشای اطلاعات حساس مثل پارامترهای URL در درخواست‌های HTTP جلوگیری کنه.

💡 کاربردهای تگ <iframe>: کجا بترکونیمش؟

تگ <iframe> برای این موارد غوغا می‌کنه:

• پیش‌نمایش صفحات: نمایش بخشی از یه سایت دیگه.
• ویدئوهای آنلاین: جاسازی ویدئو از یوتیوب، ویمئو، یا پلتفرم‌های مشابه.
• نقشه‌ها: نمایش نقشه‌های گوگل یا سایر سرویس‌های نقشه.
• فرم‌ها و ابزارها: جاسازی فرم‌های گوگل یا ابزارهای تعاملی.
• تبلیغات: نمایش بنرهای تبلیغاتی امن.

📝 مثال‌های عملی: تگ <iframe> رو تو عمل ببین!

بیا چند نمونه باحال ببینیم که نشون می‌دن <iframe> چطور کار می‌کنه:

1. جاسازی ویدئوی یوتیوب:

<iframe width="560" height="315" 
src="https://www.youtube.com/embed/dQw4w9WgXcQ" 
title="ویدئوی یوتیوب" allow="autoplay; 
clipboard-write; encrypted-media" allowfullscreen></iframe>

این کد یه ویدئوی یوتیوب رو با امکان تمام‌صفحه جاسازی می‌کنه.

2. جاسازی نقشه گوگل:

<iframe width="600" height="450" 
src="https://www.google.com/maps/embed?pb=..."
 loading="lazy" title="نقشه تهران"></iframe>

این کد یه نقشه گوگل رو با بارگذاری تنبل نمایش می‌ده.

3. جاسازی HTML داخلی:

<iframe srcdoc="<h1>سلام دنیا!</h1><p>این یه تست ساده‌ست.</p>" width="400" height="200" title="تست HTML"></iframe>

این کد محتوای HTML رو مستقیم تو <iframe> نمایش می‌ده.

4. <iframe> امن با sandbox:

<iframe src="https://example.com" sandbox="allow-scripts" width="500" height="300" title="صفحه امن">
    مرورگر شما از iframe پشتیبانی نمی‌کنه.
</iframe>

این کد فقط اجازه اجرای اسکریپت‌ها رو می‌ده و بقیه قابلیت‌ها رو محدود می‌کنه.

💡 امنیت و sandbox: هکرها رو ناامید کن!

تگ <iframe> می‌تونه خطرناک باشه اگه درست امنش نکنی. با این روش‌ها خیالت راحت باشه:

• استفاده از sandbox: برای محدود کردن قابلیت‌ها:
• HTTPS اجباری: فقط از منابع HTTPS استفاده کن تا از حملات MITM (Man-in-the-Middle) جلوگیری بشه.
• محدود کردن allow: فقط قابلیت‌های ضروری رو فعال کن:
• کنترل referrerpolicy: اطلاعات حساس رو با no-referrer مخفی کن.
• چک کردن منبع: مطمئن شو که منبع <iframe> قابل اعتماده تا از XSS (Cross-Site Scripting) جلوگیری بشه.

🚀 نکات مهم سئو در استفاده از تگ iframe

• محتوای داخل تگ iframe توسط موتورهای جستجو به صورت جداگانه ایندکس می‌شن و ارتباطی با محتوای صفحه شما نداره.
• استفاده بیش از حد از این تگ می‌تونه باعث کاهش سرعت بارگذاری صفحه بشه که تأثیر منفی بر سئو داره.

💡 مزایا و معایب استفاده از تگ iframe

✨ مزایا:

• نمایش محتوای خارجی بدون نیاز به دانلود یا کپی کردن اون.
• جداسازی محتوای داخلی و خارجی از نظر امنیتی.

⚠️ معایب:

• تأثیر منفی بر سرعت و عملکرد صفحه.
• محدودیت در سازگاری با برخی از مرورگرها.
• مشکلات امنیتی در صورت عدم استفاده صحیح از ویژگی‌های مانند sandbox.

❓ پرسش‌های متداول

۱. آیا iframe روی سئو تاثیر منفی دارد؟
بله، اگر محتوای مهم سایت داخل iframe باشد، گوگل ممکن است آن را ایندکس نکند.

۲. چطور iframe را واکنش‌گرا کنم؟
با CSS و استفاده از نسبت ابعاد (Aspect Ratio) که بالاتر گفتیم.

۳. فرق iframe با object چیست؟
iframe بیشتر برای جاسازی صفحات وب و اپلیکیشن‌هاست ولی object برای انواع مختلف محتوا.

🏁 جمع‌بندی

حالا تگ <iframe> رو مثل یه حرفه‌ای بلدی! وقتشه دست به کار شی! با <iframe> می‌تونی محتوای خارجی مثل ویدئو، نقشه، یا فرم رو تو وب پویا، امن، و کاربرپسند نمایش بدی، تجربه کاربرات رو به اوج برسونی، و گوگل رو عاشق سایتت کنی! این مقاله، کامل‌ترین راهنما برای تگ <iframe> هست: از ساختار و کاربردها تا مثال‌های عملی، نکات پیشرفته، امنیت، و ترفندهای سئو. پس معطل نکن! یه <iframe> بنویس و نشون بده چقدر خفنی! ما تا آخر خط باهاتیم! در ضمن، یادت نره اگه مبتدی هستی، کدات رو تو W3C Validator چک کنی و مطمئن شی درست نوشتی.

💬 ایده‌هات رو فریاد بزن!

نظرت راجب تگ <iframe> چیه؟ دلت می‌خواد چه چیزی به این آموزش اضافه کنیم؟ سوالی تو ذهنت مونده؟ تو نظرات برامون بگو! تیم حرفه‌ای پشتیبانی با جون و دل جوابت رو می‌ده!

شهرام نجفی

شهرام نجفی — بیش از ۱۵ سال طراحی و توسعهٔ وب به‌صورت فریلنس. قالب اختصاصی آوای وب را از صفر نوشته‌ام. مطالب این سایت را بر پایهٔ مستندات رسمی MDN و WHATWG می‌نویسم و قبل از انتشار در مرورگرهای واقعی تست می‌کنم. نمونه‌کارهایم در shahramnajafi.com است.