جلسه 12 آموزش HTML: کار با آی فریم و تگ iframe

سلام رفیق برنامه نویس خودم، چطوری؟! 🤘
به جلسه دوازدهم آموزش HTML خوش اومدی! امروز قراره وارد دنیای جذاب آی فریم بشیم. 😊

توی این جلسه می‌خوام بهت نشون بدم که چطور با استفاده از تگ <iframe> می‌تونی محتوای خارجی رو توی سایتت نمایش بدی؛ مثل نقشه‌های گوگل 🗺️، ویدیوهای یوتیوب 🎥 یا حتی کل یه صفحه وب دیگه! این تگ بهت این امکان رو میده که بدون ترک سایتت، محتواهای جذاب و کاربردی رو به کاربرانت ارائه بدی.

پس بیا با هم قدم به قدم یاد بگیریم چطوری از آی فریم‌ها استفاده کنیم و از امکانات بی‌نظیرش نهایت بهره رو ببریم. 🚀

آی فریم چیست؟ 🤔

آی فریم (iframe) مخفف Inline Frame هست. با استفاده از این تگ می‌تونی یک صفحه وب دیگه رو داخل صفحه خودت قرار بدی. مثل اینکه یک پنجره کوچک داخل صفحه‌ات باز کردی که محتوای سایت دیگه‌ای رو نشون میده!

× 📣 اینجا محل دیده شدن تبلیغ شماست کلیک کن AD

جلسه 8 آموزش HTML: کار با تصاویر در html

مطالعه

جلسه 14 آموزش HTML: کامنت گذاری در html

مطالعه

جلسه 13 آموزش HTML: آشنایی با تگ‌ های معنایی (Semantic Elements)

مطالعه

این قابلیت خیلی کاربردی هست، چون می‌تونی بدون اینکه کاربر از سایتت خارج بشه، محتوای خارجی مثل نقشه‌ها، ویدیوهای یوتیوب، پست‌های شبکه‌های اجتماعی و محتواهای مشابه رو به سایتت اضافه کنی.

نحوه استفاده از تگ iframe 📝

ساختار کلی تگ <iframe> به این شکل هست:

.______          ___   ____    ____  ___   ____    __    ____ .______  
|   _  \        /   \  \   \  /   / /   \  \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \  \   \/   / /  ^  \  \   \/    \/   /  |  |_)  |
|      /      /  /_\  \  \_    _/ /  /_\  \  \            /   |   ___/ 
|  |\  \----./  _____  \   |  |  /  _____  \  \    /\    /    |  |     
| _| `._____/__/     \__\  |__| /__/     \__\  \__/  \__/     | _|     

مثال من سایت رایا وردپرس رو میخام به صورت آی فریم درون همین پست نشون بدم طبق فرمت بالا کد من میشه:

.______          ___   ____    ____  ___   ____    __    ____ .______  
|   _  \        /   \  \   \  /   / /   \  \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \  \   \/   / /  ^  \  \   \/    \/   /  |  |_)  |
|      /      /  /_\  \  \_    _/ /  /_\  \  \            /   |   ___/ 
|  |\  \----./  _____  \   |  |  /  _____  \  \    /\    /    |  |     
| _| `._____/__/     \__\  |__| /__/     \__\  \__/  \__/     | _|     

با این کد، صفحه rayawp.ir داخل یک کادر با عرض 100 درصد و ارتفاع 400 پیکسل توی صفحه تو نمایش داده میشه.

توجه! 🤔 همه سایت‌ها رو نمی‌تونی به راحتی داخل آی فریم قرار بدی. مثلاً سایت‌هایی مثل گوگل با فعال کردن تنظیمات امنیتی مثل X-Frame-Options 🔒 جلوی لود شدن در آی فریم رو می‌گیرن.

اگه برات سواله X-Frame-Options چیه؟! بهت خلاصه بگم یه هدر امنیتیه که به مرورگر می‌گه آیا اجازه میده صفحه رو داخل فریم یا آی فریم نمایش بدن یا نه. این کار باعث جلوگیری از حملات کلیک‌ جک می‌شه.

ویژگی‌ها (صفات) مهم تگ iframe ⚙️

تگ iframe کلی ویژگی داره که بهت کمک میکنن ظاهر و رفتارش رو کنترل کنی. مهمترینشون:

1. src

این صفت، آدرس صفحه‌ای که می‌خوای داخل آی فریم نمایش بدی رو مشخص می‌کنه:

.______          ___   ____    ____  ___   ____    __    ____ .______  
|   _  \        /   \  \   \  /   / /   \  \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \  \   \/   / /  ^  \  \   \/    \/   /  |  |_)  |
|      /      /  /_\  \  \_    _/ /  /_\  \  \            /   |   ___/ 
|  |\  \----./  _____  \   |  |  /  _____  \  \    /\    /    |  |     
| _| `._____/__/     \__\  |__| /__/     \__\  \__/  \__/     | _|     

2. width و height

با این صفات می‌تونی اندازه آی فریم (طول و عرض) رو تعیین کنی:

.______          ___   ____    ____  ___   ____    __    ____ .______  
|   _  \        /   \  \   \  /   / /   \  \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \  \   \/   / /  ^  \  \   \/    \/   /  |  |_)  |
|      /      /  /_\  \  \_    _/ /  /_\  \  \            /   |   ___/ 
|  |\  \----./  _____  \   |  |  /  _____  \  \    /\    /    |  |     
| _| `._____/__/     \__\  |__| /__/     \__\  \__/  \__/     | _|     

عددی که به عنوان مقدار به هر یک از صفات width و height میدی بصورت پیش فرض با واحد پیکسل یا px تنظیم میشه و نیازی نیست px رو بعد از عدد درج کنی.

می‌تونی مقادیر رو به پیکسل (مثل “500”) یا به صورت درصدی (مثل “100%”) تعیین کنی.

3. title

برای بهبود دسترسی و ارتقای تجربه کاربری، همیشه به آی فریم یه عنوان (title) مناسب اضافه کن:

.______          ___   ____    ____  ___   ____    __    ____ .______  
|   _  \        /   \  \   \  /   / /   \  \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \  \   \/   / /  ^  \  \   \/    \/   /  |  |_)  |
|      /      /  /_\  \  \_    _/ /  /_\  \  \            /   |   ___/ 
|  |\  \----./  _____  \   |  |  /  _____  \  \    /\    /    |  |     
| _| `._____/__/     \__\  |__| /__/     \__\  \__/  \__/     | _|     

4. name

ویژگی name به آی فریم یه نام می‌ده که می‌تونی ازش به عنوان مقصد لینک‌ها استفاده کنی. به عنوان مثال، فرض کن آی فریم با نام “myFrame” رو تعریف کردی:

.______          ___   ____    ____  ___   ____    __    ____ .______  
|   _  \        /   \  \   \  /   / /   \  \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \  \   \/   / /  ^  \  \   \/    \/   /  |  |_)  |
|      /      /  /_\  \  \_    _/ /  /_\  \  \            /   |   ___/ 
|  |\  \----./  _____  \   |  |  /  _____  \  \    /\    /    |  |     
| _| `._____/__/     \__\  |__| /__/     \__\  \__/  \__/     | _|     

حالا وقتی لینکی رو اینطوری بنویسی:

.______          ___   ____    ____  ___   ____    __    ____ .______  
|   _  \        /   \  \   \  /   / /   \  \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \  \   \/   / /  ^  \  \   \/    \/   /  |  |_)  |
|      /      /  /_\  \  \_    _/ /  /_\  \  \            /   |   ___/ 
|  |\  \----./  _____  \   |  |  /  _____  \  \    /\    /    |  |     
| _| `._____/__/     \__\  |__| /__/     \__\  \__/  \__/     | _|     

وقتی روی این لینک کلیک کنی، محتوای سایت نمونه (تستی) داخل همون آی فریم بارگذاری می‌شه، بدون اینکه صفحه اصلی رفرش یشه. 🚀 این ویژگی کمک می‌کنه تا تجربه کاربری بهتری رو فراهم کنی و محتوا رو به صورت هدفمند در بخش‌های مختلف صفحه نمایش بدی. 😎

6. loading

ویژگی loading بهت این امکان رو میده که کنترل کنی آی فریم چطور و چه زمانی بارگذاری بشه. مثلاً:

• lazy: آی فریم فقط وقتی بارگذاری میشه که کاربر به اون نزدیک بشه. این روش باعث بهبود سرعت لود صفحه و صرفه‌جویی در منابع میشه. 🚀
• eager: آی فریم بلافاصله با بارگذاری صفحه محتوا رو دانلود می‌کنه، بدون توجه به موقعیت کاربر.

با انتخاب درست این ویژگی می‌تونی تجربه کاربری بهتری رو فراهم کنی. 😊

.______          ___   ____    ____  ___   ____    __    ____ .______  
|   _  \        /   \  \   \  /   / /   \  \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \  \   \/   / /  ^  \  \   \/    \/   /  |  |_)  |
|      /      /  /_\  \  \_    _/ /  /_\  \  \            /   |   ___/ 
|  |\  \----./  _____  \   |  |  /  _____  \  \    /\    /    |  |     
| _| `._____/__/     \__\  |__| /__/     \__\  \__/  \__/     | _|     

7. sandbox

ویژگی sandbox بهت این امکان رو می‌ده که دسترسی‌ها و عملکردهای آی فریم رو محدود کنی، 🚧 این کار باعث می‌شه اسکریپت‌های مخرب اجرا نشن و امنیت سایتت بالاتر بره. 🔒

.______          ___   ____    ____  ___   ____    __    ____ .______  
|   _  \        /   \  \   \  /   / /   \  \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \  \   \/   / /  ^  \  \   \/    \/   /  |  |_)  |
|      /      /  /_\  \  \_    _/ /  /_\  \  \            /   |   ___/ 
|  |\  \----./  _____  \   |  |  /  _____  \  \    /\    /    |  |     
| _| `._____/__/     \__\  |__| /__/     \__\  \__/  \__/     | _|     

ویژگی sandbox چندین مقدار مختلف داره که می‌تونی باهاش سطح دسترسی آی فریم رو کنترل کنی. 🚧 این مقادیر عبارتند از:

• allow-scripts → اجازه اجرای اسکریپت‌ها رو می‌ده، اما اسکریپت‌ها نمی‌تونن پنجره جدید باز کنن.
• allow-same-origin → آی فریم می‌تونه مثل یه صفحه عادی رفتار کنه و به کوکی‌ها و اطلاعات دامنه خودش دسترسی داشته باشه.
• allow-forms → اجازه ارسال فرم‌ها رو می‌ده.
• allow-popups → آی فریم می‌تونه پنجره جدید باز کنه (مثل لینک‌هایی که توی تب جدید باز می‌شن).
• allow-modals → امکان نمایش دیالوگ‌های مودال مثل alert() رو می‌ده.
• allow-presentation → اجازه می‌ده آی فریم به حالت نمایش اسلاید (Presentation) بره.
• allow-downloads → امکان دانلود فایل از داخل آی فریم رو فعال می‌کنه.
• allow-pointer-lock → اجازه استفاده از API قفل نشانگر موس (Pointer Lock API) رو می‌ده (مثلاً برای بازی‌های تحت وب).
• allow-orientation-lock → اجازه قفل کردن چرخش صفحه در موبایل و تبلت رو می‌ده.
• allow-top-navigation-by-user-activation → فقط وقتی که کاربر تعامل (مثل کلیک) داشته باشه، اجازه هدایت صفحه والد رو می‌ده.

کاربردهای عملی آی فریم 🛠️

1. نمایش نقشه های گوگل در سایت با آی فریم

یکی از رایج‌ ترین استفاده‌های آی فریم، نمایش نقشه‌های گوگل در سایت هست:

.______          ___   ____    ____  ___   ____    __    ____ .______  
|   _  \        /   \  \   \  /   / /   \  \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \  \   \/   / /  ^  \  \   \/    \/   /  |  |_)  |
|      /      /  /_\  \  \_    _/ /  /_\  \  \            /   |   ___/ 
|  |\  \----./  _____  \   |  |  /  _____  \  \    /\    /    |  |     
| _| `._____/__/     \__\  |__| /__/     \__\  \__/  \__/     | _|     

2. نمایش ویدیوهای یوتیوب با آی فریم

می‌تونی ویدیوهای یویتیوب رو به راحتی توی سایتت نمایش بدی. برای این کار، فقط کافیه از تگ <iframe> استفاده کنی:

.______          ___   ____    ____  ___   ____    __    ____ .______  
|   _  \        /   \  \   \  /   / /   \  \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \  \   \/   / /  ^  \  \   \/    \/   /  |  |_)  |
|      /      /  /_\  \  \_    _/ /  /_\  \  \            /   |   ___/ 
|  |\  \----./  _____  \   |  |  /  _____  \  \    /\    /    |  |     
| _| `._____/__/     \__\  |__| /__/     \__\  \__/  \__/     | _|     

فقط کافیه VIDEO_ID رو با شناسه ویدیوی موردنظر جایگزین کنی. 🎥 همونطور که میدونی چون یوتیوب در ایران فیلتره؛ آی فریم اون بدون تغییر آی‌پی به یه کشور خارجی نمایش داده نمی‌شه. ❌ اگه کاربران سایتت داخل ایران هستن، بهتره از سرویس‌های داخلی مثل آپارات استفاده کنی

3. قرار دادن فرم‌های گوگل در صفحه وب با استفاده از آی فریم

اگه می‌خوای یه فرم نظرسنجی، ثبت‌نام یا هر نوع فرم آنلاین رو توی سایتت نمایش بدی، می‌تونی از Google Forms استفاده کنی و اون رو داخل آی فریم جاسازی کنی. این روش باعث می‌شه کاربر بدون نیاز به خروج از سایتت، فرم رو پر کنه. 😊

برای این کار، کافیه لینک آی فریم فرم گوگل رو از بخش “اشتراک‌گذاری” بگیری و در کد زیر جایگذاری کنی:

.______          ___   ____    ____  ___   ____    __    ____ .______  
|   _  \        /   \  \   \  /   / /   \  \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \  \   \/   / /  ^  \  \   \/    \/   /  |  |_)  |
|      /      /  /_\  \  \_    _/ /  /_\  \  \            /   |   ___/ 
|  |\  \----./  _____  \   |  |  /  _____  \  \    /\    /    |  |     
| _| `._____/__/     \__\  |__| /__/     \__\  \__/  \__/     | _|     

🔹 YOUR_FORM_ID رو با شناسه فرم خودت جایگزین کن.
🔹 عرض (width) و ارتفاع (height) رو متناسب با طراحی سایتت تنظیم کن.

این روش برای جمع‌آوری اطلاعات کاربران خیلی مفیده و فرم‌ها کاملاً واکنش‌گرا هستن، یعنی روی موبایل و دسکتاپ به‌خوبی نمایش داده می‌شن! 🚀

4. نمایش پست‌های اینستاگرام با آی فریم

می‌دونی که حتی می‌تونی پست‌های اینستاگرام رو هم مستقیماً توی سایتت نمایش بدی؟ 🤩 این کار باعث می‌شه محتوای اینستاگرامت رو بدون نیاز به خروج از سایت، به کاربر نشون بدی.

برای این کار، اینستاگرام خودش یه کد جاسازی (Embed Code) بهت می‌ده. فقط کافیه:

1️⃣ روی سه‌نقطه بالای پست اینستاگرام کلیک کنی.
2️⃣ گزینه Embed رو انتخاب کن.
3️⃣ کدی که بهت داده رو توی سایتت قرار بدی.

به این شکل:

.______          ___   ____    ____  ___   ____    __    ____ .______  
|   _  \        /   \  \   \  /   / /   \  \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \  \   \/   / /  ^  \  \   \/    \/   /  |  |_)  |
|      /      /  /_\  \  \_    _/ /  /_\  \  \            /   |   ___/ 
|  |\  \----./  _____  \   |  |  /  _____  \  \    /\    /    |  |     
| _| `._____/__/     \__\  |__| /__/     \__\  \__/  \__/     | _|     

از اونجایی که متأسفانه اینستاگرام هم مثل یوتیوب فیلتره 🚫، اگه کد آی فریم رو داخل صفحه قرار بدی، محتوا نمایش داده نمیشه. ❌ برای دیدن پست‌های اینستاگرام، کاربر باید آی‌پی خودش رو تغییر بده تا آی فریم به درستی بارگذاری بشه. 🌍

🔹 نکته مهم! استفاده بیش از حد از آی فریم‌ها باعث کاهش سرعت لود صفحه 🚀 می‌شه، چون هر آی فریم یه صفحه جداگانه رو بارگذاری می‌کنه. بنابراین، سعی کن فقط در موارد ضروری ازش استفاده کنی تا سرعت و عملکرد سایتت افت نکنه. ⚡😊

جمع بندی: آی فریم، پنجره ای به دنیای بیرون! 🚀

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

حالا برو تمرین کن و یه صفحه وب بساز که توش از آی فریم برای نمایش محتوای جذاب استفاده کرده باشی! 😉