آموزش تگ iframe در HTML بصورت جامع
تگ iframe (آی فریم) در HTML
آی فریم یا Iframe به یک پنجره یا قاب که بتوان در آن محتویاتی همچون تصویر،ویدئو و.. را به نمایش گذاشت گفته می شود. آی فریم ها در نوبه ی خود میتوانند استفاده های زیادی داشته باشند.
بطور کلی از طریق تگ iframe میتوان یک صفحه وب را درون یک صفحه ی وب دیگر قرار داد.
نحوه استفاده از تگ ifram در HTML
برای ایجاد یا استفاده از آی فریم ها یا Iframes در HTML ما باید از تگ <iframe> استفاده نماییم.
شکل کلی برای استفاده از این تگ در HTML بصورت زیر می باشد:
|
1 |
<iframe src="URL"></iframe> |
مثال:
|
1 2 3 4 5 |
<body> <iframe src="https://upweb.ir"></iframe> </body> |
نتیجه:
تنظیم عرض و ارتفاع در iframe
برای تعیین اندازه iframe از ویژگی های height و width استفاده کنید.
ارتفاع و عرض به صورت پیش فرض بر حسب پیکسل مشخص می شود:
( البته ما با استفاده از صفت Style یا بطور کلی با استفاده از CSS نیز میتوانیم این اندازه را تنظیم نماییم.)
مثال:
|
1 2 3 4 5 |
<body> <iframe src="https://upweb.ir" width="500" height="250"></iframe> </body> |
نتیجه:
تنظیم اندازه iframe از طریق صفت Style
یا می توانید ویژگی style را اضافه کنید و از ویژگی های ارتفاع و عرض CSS استفاده کنید:
مثال:
|
1 2 3 4 5 |
<body> <iframe src="https://upweb.ir" style="height:200px;width:300px" title="آموزش تگ آی فریم در HTML"></iframe> </body> |
حذف حاشیه در Iframe
Border موجود در دستورات CSS استفاده نمایید.|
1 2 3 4 5 |
<body> <iframe src="https://upweb.ir" style="border:none;" title="آموزش HTML در آپ وب "></iframe> </body> |
با CSS، می توانید اندازه، استیل و رنگ حاشیه iframe را نیز تغییر دهید:
|
1 2 3 4 5 |
<body> <iframe src="https://upweb.ir" style="border:2px solid red;" title="Iframe Example"></iframe> </body> |
نتیجه:
نحوه باز شدن لینک های یک صفحه در آی فریم
فرض کنید یک یا چند لینک در صفحه داریم و میخواهیم وقتی کاربر بروی لینک ها کلیک کرد مقصد لینک ها درون آی فریم باز شود، برای اینکار ما باید ۲ کار زیر را انجام دهیم :
- تنظیم یک نام برای آی فریم توسط صفت
name - قرار دادن نام آی فریم در صفت
Targetلینک ها
برای مثال لطفا به دستورات زیر توجه نمایید:
|
1 2 3 4 5 6 7 8 9 |
<body> <iframe src="#" name="iframe_a" height="300px" width="100%" title="Iframe Example"></iframe> <p><a href="https://upweb.ir" target="iframe_a">کلیک کنید</a></p> </body> |
نتیجه:
همانطور که خروجی را مشاهده مینمایید ما با استفاده از صفت name یک نام برای آی فریم مشخص کردیم سپس در صفت target موجود در تگ لینک نامی را که برای آی فریم تنظیم کرده بودیم را قرار دادیم، حال با کلیک بروی لینک (کلیک کنید) مقصد لینک درون آی فریم باز خواهد شد.