آموزش تگ iframe در HTML بصورت جامع

تگ iframe (آی فریم) در HTML

آی فریم یا Iframe به یک پنجره یا قاب که بتوان در آن محتویاتی همچون تصویر،ویدئو و.. را به نمایش گذاشت گفته می شود. آی فریم ها در نوبه ی خود میتوانند استفاده های زیادی داشته باشند.

بطور کلی از طریق تگ iframe میتوان یک صفحه وب را درون یک صفحه ی وب دیگر قرار داد.

نحوه استفاده از تگ ifram در HTML

برای ایجاد یا استفاده از آی فریم ها یا Iframes در HTML ما باید از تگ <iframe> استفاده نماییم.

شکل کلی برای استفاده از این تگ در HTML بصورت زیر می باشد:

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

مثال

<body>
<iframe src="https://upweb.ir"></iframe>
</body>

نتیجه

 

تنظیم عرض و ارتفاع در iframe

برای تعیین اندازه iframe از ویژگی های height و width استفاده کنید.

ارتفاع و عرض به صورت پیش فرض بر حسب پیکسل مشخص می شود:

( البته ما با استفاده از صفت Style یا بطور کلی با استفاده از CSS نیز میتوانیم این اندازه را تنظیم نماییم.)

مثال

<body>
<iframe src="https://upweb.ir" width="500" height="250"></iframe>
</body>

نتیجه

تنظیم اندازه iframe از طریق صفت Style

یا می توانید ویژگی style را اضافه کنید و از ویژگی های ارتفاع و عرض CSS استفاده کنید:

مثال

<body>
<iframe src="https://upweb.ir" style="height:200px;width:300px" title="آموزش تگ آی فریم در HTML"></iframe>
</body>

حذف حاشیه در Iframe

Iframe - مرز را حذف کنید

همانطور که در مثال های قبل مشاهده کرده اید ،به طور پیش فرض، یک iframe یک حاشیه در اطراف خود دارد.

برای حذف حاشیه، ویژگی style را اضافه کنید و از ویژگی Border موجود در دستورات CSS استفاده نمایید.

<body>
<iframe src="https://upweb.ir" style="border:none;" title="آموزش HTML در آپ وب "></iframe>
</body>

با CSS، می توانید اندازه، استیل و رنگ حاشیه iframe را نیز تغییر دهید:

<body>
<iframe src="https://upweb.ir" style="border:2px solid red;" title="Iframe Example"></iframe>
</body>

نتیجه

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

فرض کنید یک یا چند لینک در صفحه داریم و میخواهیم وقتی کاربر بروی لینک ها کلیک کرد مقصد لینک ها درون آی فریم باز شود، برای اینکار ما باید ۲ کار زیر را انجام دهیم :

1. تنظیم یک نام برای آی فریم توسط صفت name
2. قرار دادن نام آی فریم در صفت Target لینک ها

برای مثال لطفا به دستورات زیر توجه نمایید:

<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 موجود در تگ لینک نامی را که برای آی فریم تنظیم کرده بودیم را قرار دادیم، حال با کلیک بروی لینک (کلیک کنید) مقصد لینک درون آی فریم باز خواهد شد.