این آموزش در تاریخ ۱۴۰۲/۰۶/۱۹ آپدیت شده است.
آموزش کار با آی فریم ها یا Iframes در HTML
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش کار با آی فریم ها یا Iframes در HTML با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
آی فریم ها یا Iframes در HTML
آی فریم یا به انگلیسی Iframe به یک پنجره یا قاب که بتوان در آن محتویاتی همچون تصویر، ویدئو ، سایت و… را به نمایش گذاشت گفته می شود.
برای مثال الان من سایت خودمو در قالب یک آی فریم در اینجا قرار دادم :
یک نمونه از استفاده آی فریم ها، در سایت های اشتراک ویدئو ( مثله سایت آپارات و.. ) می باشد، که به راحتی میتوان با استفاده از آی فریم ها ویدئوهای این سایت هارو در وبسایت خودمان یا درکل در یک صفحه وب به نمایش درآوریم.
پس بطور کلی ما با استفاده از آی فریم یا به انگلیسی Iframe میتونیم به راحتی یک سایت یا یک فایل یا یک تصویر و یا بطور کلی میتوان یک صفحه وب را درون یک صفحه ی وب دیگر قرار داد.
قرار دادن یک وبسایت در آی فریم بدون اطلاع صاحب سایت، از نظر اخلاقی کار درستی نیست ، لذا لطفا از قرار دادن سایت های دیگران در آی فریم بدون اطلاع و اجازه کتبی خودداری نمایید.
بعضی از سایت هارو مثه مثلا سایت گوگل و.. نمیشه داخل آی فریم گذاشت، چون این سایت ها خودشون کاری کردن که نشه درون آی فریم قرار بگیرند، و عملا کاری از دست ما برنماید.
Free-Learn
نحوه استفاده از آی فریم در HTML
برای ایجاد یا استفاده از آی فریم ها یا Iframes در HTML ما باید از تگ <iframe> استفاده نماییم، شکل کلی برای استفاده از این تگ در HTML بصورت زیر می باشد.
|
1 |
<iframe src="URL"></iframe> |
که میتوانیم با وارد کردن آدرس فایل / سایت و.. مورد نظرمان در قسمت src اون رو در آی فریم به نمایش دربیاوریم.
مثال شماره ۱ : نمایش سایت فری لرن درون آی فریم
|
1 2 3 4 5 |
<body> <iframe src="https://free-learn.ir"></iframe> </body> |
حال اگر بروی دکمه (امتحان کنید) کلیک نمایید میتوانید مشاهده نمایید که به راحتی و با استفاده از تگ <iframe> ما تونستیم سایت آموزشی فری لرن رو در قالب یک آی فریم به نمایش دربیاوریم.
Free-Learn
نحوه تنظیم عرض و ارتفاع آی فریم
ما با استفاده از صفات width و height به ترتیب میتونیم اندازه عرض و ارتفاع یک آی فریم را مشخص نماییم که البته ما با استفاده از صفت Style یا بطور کلی با استفاده از CSS نیز میتوانیم این اندازه را تنظیم نماییم.
عددی که به عنوان مقدار برای هر یک از صفات width و height مشخص می شود بصورت پیش فرض با واحد پیکسل یا px تنظیم می شود.
مثال شماره ۱ : استفاده از صفات width و height
|
1 2 3 4 5 |
<body> <iframe src="https://free-learn.ir" width="500" height="250"></iframe> </body> |
مثال شماره ۲ : استفاده از صفت Style ( یعنی عملا استفاده از دستورات CSS )
|
1 2 3 4 5 |
<body> <iframe src="https://free-learn.ir" style="width:100%; height:300px;"></iframe> </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
نحوه باز شدن لینک های یک صفحه در آی فریم
فرض کنید یک یا چند لینک در صفحه داریم و میخواهیم وقتی کاربر بروی لینک ها کلیک کرد مقصد لینک ها درون آی فریم باز شود، برای اینکار ما باید ۲ کار زیر را انجام دهیم :
- تنظیم یک نام برای آی فریم توسط صفت
name - قرار دادن نام آی فریم در صفت
Targetلینک ها
برای مثال لطفا به دستورات زیر توجه نمایید :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<body> <iframe src="#" name="free-learn"></iframe> <p> <a href="https://free-learn.ir/category/web_design/html_tutorial/" target="free-learn">آموزش اچ تی ام ال</a> </p> <p> <a href="https://free-learn.ir/category/web_design/css_tutorial/" target="free-learn">آموزش سی اس اس</a> </p> <p> <a href="https://free-learn.ir/category/web_design/javascript_tutorial/" target="free-learn">آموزش جاوااسکریپت</a> </p> </body> |
Free-Learn
مثال های بیشتر از آی فریم ها در HTML
مثال شماره ۱ : نمایش یک تصویر در آی فریم
|
1 2 3 4 5 |
<body> <iframe src="https://files.free-learn.ir/Tryitself/html/learn/images/cat.gif"></iframe> </body> |
مثال شماره ۲ : نمایش چندین وبسایت بصورت همزمان در آی فریم
|
1 2 3 4 5 6 |
<!DOCTYPE html> <html> <body> برای مشاهده دستورات بروی دکمه امتحان کنید کلیک نمایید </body> </html> |
مثال شماره ۳ : نمایش یک فایل PDF در آی فریم ( در حالت تمام صفحه )
|
1 2 3 4 5 |
<body> <iframe src="files/test-object.pdf"></iframe> </body> |
Free-Learn
نکات و توضیحات
معمولا موتورهای جستجوگر ( یا همون ربات های خزنده مثه گوگل ) قادر به درک محتوای داخل IFrame نیستن و به همین خاطر میگن تاجایی که میشه اصلا از IFrame استفاده نکنید چون برای سئو خوب نیست.
ولی خب اگه باز مجبوری بود و باید به اجبار از IFrame ها استفاده کنید سعی کنید حتما از صفت title درون تگ iframe استفاده کنید و توضیح کوتاهی براش مشخص کنید.
شکل کلی :
|
1 |
<iframe src="URL" title="Description"></iframe> |
مثال :
|
1 |
<iframe src="https://free-learn.ir/" title="سایت آموزشی فری لرن"></iframe> |
