این آموزش در تاریخ ۱۴۰۲/۰۶/۲۳ آپدیت شده است.
آموزش تگ iframe در HTML
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش تگ iframe در HTML با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
تگ Iframe در HTML
تگ iframe تگی است با استفاده از اون میتونیم به راحتی یک سایت یا یک فایل یا یک تصویر و یا بطور کلی میتوان یک صفحه وب را درون یک صفحه ی وب دیگر قرار داد.
بنده در یک مطلب جداگانه ، آموزش کار با آی فریم ها یا Iframe را در HTML آموزش دادم، که پیشنهاد میکنم حتما این مطلب رو مشاهده نمایید.
قرار دادن یک وبسایت در آی فریم بدون اطلاع صاحب سایت، از نظر اخلاقی کار درستی نیست ، لذا لطفا از قرار دادن سایت های دیگران در آی فریم بدون اطلاع و اجازه کتبی خودداری نمایید.
بعضی از سایت هارو مثه مثلا سایت گوگل و.. نمیشه داخل آی فریم گذاشت، چون این سایت ها خودشون کاری کردن که نشه درون آی فریم قرار بگیرند، و عملا کاری از دست ما برنماید.
Free-Learn
مثال از تگ iframe در HTML
در ادامه میتوانید یک مثال از این تگ را مشاهده نمایید.
|
1 2 3 4 5 |
<body> <iframe src="https://free-learn.ir"></iframe> </body> |
مثال شماره ۲ : مشخص کردن اندازه عرض و ارتفاع آی فریم
|
1 2 3 4 5 |
<body> <iframe src="https://free-learn.ir" width="500" height="250"></iframe> </body> |
مثال شماره ۳ : باز شدن لینک های صفحه در درون تگ Iframe
|
1 2 3 4 5 6 7 8 9 |
<body> <iframe src="#" name="free-learn"></iframe> <p> <a href="" target="free-learn">آموزش اچ تی ام ال</a> </p> </body> |
مثال شماره ۴ : تمام صفحه کردن آی فریم
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<style> body{ margin:0; overflow:hidden; } iframe{ border:none; width:100vw; height:100vh; } </style> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از تگ iframe در HTML پشتیبانی میکنند یا خیر.
| نام مرورگر | Chrome | Firefox | Opera | Safari | Edge |
| پشتیبانی | بله | بله | بله | بله | بله |
Free-Learn
جدول صفات تگ iframe در HTML
در جدول زیر میتوانید صفات بهمراه مقادیری را که میتوان در این تگ استفاده کرد را مشاهده نمایید.
| نام صفت | مقدار | توضیح |
|---|---|---|
| height | pixels | برای تنظیم اندازه ارتفاع Iframe |
| name | text | یک نام را برای آی فریم مشخص میکند |
| 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 |
اعمال یکسری محدودیت ها بروی محتوای آی فریم |
| src | URL | مشخص کردن آدرس URL برای IFrame |
| srcdoc | HTML_Code | برای قرار دادن تگ های HTML درون IFrame |
| width | pixels | برای تنظیم اندازه عرض Iframe |
Free-Learn
پشتیبانی از صفات و رویدادهای عمومی
تگ iframe از صفات عمومی و رویدادهای عمومی در HTML پشتیبانی می کند.
Free-Learn
نکات و توضیحات
- معمولا مرورگرها از تگ آی فریم ( Iframe ) پشتیبانی میکنند، ولی خب با این حال ما میتونیم یک متن به دلخواه درون تگ IFrame قرار بدیم تا اگر مرورگر کاربر از این تگ پشتیبانی نکرد آن متن به کاربر نمایش داده شود.
مثال :
|
1 2 3 |
<iframe src="https://free-learn.ir"> <p>مرورگر شما از آی فریم پشتیبانی نمیکند</p> </iframe> |
Free-Learn
دستورات CSS پیش فرض
معمولا مرورگرها تگ iframe را بصورت پیش فرض با دستورات CSS زیر نمایش میدهند.
|
1 2 3 4 5 6 7 |
iframe:focus { outline: none; } iframe[seamless] { display: block; } |
