آموزش آی فریم در html

به نام خداوند علم و دانش. سلام به دوستان گرامی و مخاطبین وب سایت آموزشی کدیونی، وقت همگی بخیر، در این صفحه با مطلب آموزش آی فریم در html از سری آموزش های HTML در خدمت شما عزیزان هستیم.

آی فریم چیست؟ آی فریم (iframe) امکان نمایش صفحه دیگری را در صفحه فعلی سایت فراهم می کند. به فرض مثال می خواهید یک سایت دیگر یا یک صفحه از سایت را در صفحه فعلی نمایش دهید در این جا ما از آی فریم استفاده می کنیم. در این مطلب با این تگ کاربردی در html آشنا خواهید شد.

آی فریم در html

تگ iframe در html امکان نمایش صفحه دیگری را به ما می دهد.

لینک صفحه مورد نظر را باید در صفت src قرار داد.

کد:

<iframe src="https://codeuni.ir" width="300" height="300"></iframe>

با استفاده از صفت width و صفت height می توان عرض و ارتفاع آی فریم را تنظیم کرد.

برای تغییرات ظاهری بیشتر iframe می توان از css استفاده کرد.

کد CSS:

iframe {
  width: 300px;
  height: 300px;
  border: 0;
}

امکان جالبی که وجود دارد می توانید لینک های خود را توسط آی فریم نمایش دهید.

برای این کار باید از صفت name در iframe استفاده کرد.

کد:

<iframe src="#" width="300" height="300" name="link"></iframe>

سپس توسط تگ a چند لینک بسازید.

کد:

<a href="https://codeuni.ir/c" target="link">لینک اول</a>
<a href="https://codeuni.ir/html" target="link">لینک دوم</a>
<a href="https://codeuni.ir/css" target="link">لینک سوم</a>
<a href="https://codeuni.ir/javascript" target="link">لینک چهارم</a>
<a href="https://codeuni.ir/php" target="link">لینک پنجم</a>

اجرا

مقدار صفت target در تگ a باید با مقدار صفت name در تگ iframe برابر باشد.

با کلیک بر روی لینک ها، صفحه مورد نظر در آی فریم نمایش داده می شود.

صفات تگ iframe

در این بخش با صفات تگ iframe آشنا خواهید شد.

صفت height

برای تنظیم ارتفاع آی فریم استفاده می شود.

<iframe height="150"></iframe>

صفت name

برای آی فریم نام انتخاب می کند.

<iframe name="example"></iframe>

صفت referrerpolicy

مشخص می کند کدام اطلاعات ارجاع دهنده هنگام نمایش آی فریم ارسال شود.

<iframe referrerpolicy="no-referrer-when-downgrade|no-referrer|same-origin|strict-origin-when-cross-origin|origin|origin-when-cross-origin|unsafe-url">لینک</iframe> 

صفت sandbox

با استفاده از این صفت می توان محدودیت هایی شامل موارد زیر برای آی فریم اعمال کرد:

• جلوگیری از اجرای اسکریپت ها
• غیرفعال کردن API
• جلوگیری از ارسال فرم
• غیر فعال کردن پلاگین ها
• غیر فعال کردن ویژگی های خودکار

<iframe sandbox="allow-forms|allow-modals|allow-orientation-lock|allow-pointer-lock|allow-popups|allow-popups-to-escape-sandbox|allow-presentation|allow-same-origin|allow-scripts|allow-top-navigation|allow-top-navigation-by-user-activation"></iframe>

بدون مقدار

در صورتی که مقداری برای صفت sandbox تعیین نکنید تمام محدودیت ها اعمال می شود.

<iframe sandbox></iframe>

allow-forms

اجازه ارسال فرم را می دهد.

<iframe sandbox="allow-forms"></iframe>

allow-modals

اجازه نمایش پنجره را می دهد.

<iframe sandbox="allow-modals"></iframe>

allow-orientation-lock

اجازه قفل کردن جهت صفحه نمایش را می دهد.

<iframe sandbox="allow-orientation-lock"></iframe>

allow-pointer-lock

اجازه استفاده از API را می دهد.

<iframe sandbox="allow-pointer-lock"></iframe>

allow-popups

اجازه فعال شدن پاپ آپ را می دهد.

<iframe sandbox="allow-popups"></iframe>

allow-popups-to-escape-sandbox

اجازه می دهد پاپ آپ بدون ارث بری از sandbox پنجره جدید باز کند.

<iframe sandbox="allow-popups-to-escape-sandbox"></iframe>

allow-presentation

اجازه شروع یک جلسه (session) را می دهد.

<iframe sandbox="allow-presentation"></iframe>

allow-same-origin

اجازه می دهد محتوای آی فریم از همان منبع دریافت شود.

<iframe sandbox="allow-same-origin"></iframe>

allow-scripts

اجازه می دهد اسکریپت ها اجرا شوند.

<iframe sandbox="allow-scripts"></iframe>

allow-top-navigation

اجازه می دهد محتوای آی فریم در زمینه بالای خود حرکت کند.

<iframe sandbox="allow-top-navigation"></iframe>

allow-top-navigation-by-user-activation

اجازه می دهد محتوای آی فریم در زمینه بالای خود حرکت کند. در صورتی که توسط کاربر شروع شده باشد.

<iframe sandbox="allow-top-navigation-by-user-activation"></iframe>

صفت src

لینک صفحه جهت نمایش در آی فریم را در این صفت قرار می دهیم.

<iframe src="URL"></iframe>

صفت srcdoc

با این صفت می توان کد های HTML را درون آی فریم نمایش داد.

<iframe srcdoc="HTML Code"></iframe>

صفت width

برای تنظیم عرض آی فریم استفاده می شود.

<iframe width="300"></iframe>

سازگاری با مرورگرها

تگ iframe با مرورگرهای زیر سازگار است:

• گوگل کروم
• فایرفاکس
• اج
• اپرا
• سافاری
• گوگل کروم اندروید
• فایرفاکس اندروید
• اپرا اندروید
• سافاری iOS