تگ iframe چیست؟ برای ایجاد یک فریم در HTML5 باید از چه تگی استفاده کنیم؟ برای اشتراک گذاری صفحات خارجی در وب سایتمان می‌بایست از چه تگی استفاده کنیم؟ آیا استفاده از iframe در سئو جدید تاثیر منفی دارد؟ چگونه ویدیو های آپارات و یوتیوب را در صفحات وب سایتمان نمایش دهیم؟
سرفصل‌های پست
تگ iframe
در مقاله قبلی با تگ frame و frameset آشنا شدیم و گفتیم که در HTML5 نمی‌توانیم از این تگ‌ها استفاده کنیم. حالا برای ساخت فریم در HTML5 می‌بایست از تگ iframe استفاده کنیم که در این مقاله با این تگ و خصوصیاتش آشنا می‌شویم.
از iframe برای تقسیم صفحه وب به چندین بخش جدا استفاده میشود. هر بخش می تواند یک سند html جداگانه را نمایش دهد. یک مجموعه iframe در یک صفحه به عنوان فریم ست(frameset) شناخته میشود. در این حالت معمولا صفحه به چندین فریم تقسیم شده است که مانند یک جدول براساس ردیف ها و ستون ها سازماندهی شده‌اند.
همچنین شما می‌توانید با استفاده از تگ iframe از سایت های اشتراک فیلم و ویدیو نیز استفاده و فیلم ها و ویدیو ها را در وب سایت خود به اشتراک بزارید. اصطلاحا به این کار Embed نیز می‌گویند.
معایب استفاده از فریم ها
در استفاده از فریم ها معایبی وجود دارد که در این حالت ها توصیه می شود از آن استفاده نکنید.
- بعضی از دستگاه های کوچک نمی توانند فریم ها را تفکیک کنند زیرا صفحه نمایش آن ها بسیار کوچک است.
- بعضی مواقع به دلیل تفاوت resolution صفحه نمایش های بزرگ، اندازه فریم ها تغییر می کنند و در اندازه تعیین شده نمایش داده نمی‌شوند.
- گاهی دکمه بازگشت در مرورگر کار نخواهد کرد.
- مرورگر هایی وجود دارند که همچنان استفاده از فریم ها را پشتیبانی نمی‌کنند.
خواص تگ Iframe
| خاصیت | مقدار | توضیح |
| align | left right top middle bottom |
این خاصیت در HTML5 پشتیبانی نمی‌شود.
این خاصیت برای تعیین موقعیت مکانی تگ <iframe> در صفحه می‌باشد. |
| frameborder | 1
0 |
این خاصیت در HTML5 پشتیبانی نمی‌شود.
مشخص میکند حاشیه دور فریم ایجاد شده قرار گیرد یا خیر. |
| height | پیکسل | این خاصیت ارتفاع فریم را مشخص میکند. |
| longdesc | URL – لینک | این خاصیت در HTML5 پشتیبانی نمی‌شود.
یک صفحه که توضیحات کاملی در رابطه با فریم ایجاد میکند. |
| marginheight | پیکسل | این خاصیت در HTML5 پشتیبانی نمی‌شود.
این خاصیت مشخص میکند که از بالا و پایین چه فاصله ای برای فریم باید ایجاد کنیم. |
| marginwidth | پیکسل | این خاصیت در HTML5 پشتیبانی نمی‌شود.
این خاصیت مشخص میکند که از چپ و راست چه فاصله ای را باید برای فریم ایجاد کنیم. |
| name | متن | نامی برای فریم مشخص میکند. |
| sandbox | allow-forms allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-top-navigation |
این خاصیت محدودیت‌های اضافه‌ای را برای فریم ما مشخص میکند. |
| scrolling | yes no auto |
این خاصیت در HTML5 پشتیبانی نمی‌شود.
این تگ مشخص میکند که آیا امکان اسکرول در فریم باشد یا خیر. |
| src | URL – لینک | این خاصیت میتونیم بگیم مهمترین خاصیت تگ iframe هست چون در این خاصیت لینک صفحه مربوط به فریم را قرار می‌دهیم. |
| srcdoc | کدهای HTML | کدهای HTML که در فریم ما می‌توانند اجرا شوند. |
| width | پیکسل | این خاصیت عرض فریم را مشخص میکند. |
همانطور که مشاهده می‌کنید بیشتر خاصیت‌هایی که مربوط به استایل‌دهی می‌باشد از خاصیت های پشتیبانی شده HTML5 تگ <iframe> حذف شده‌اند؛ این خاصیت ها به عنوان ویژگی در CSS موجود است که با آن‌ها در آموزش CSS آشنا می‌شوید.
تاثیرات تگ <iframe> در سئو
تا همین چند سال پیش استفاده از iframe در صفحات برای نمایش ویدیو های سایت های اشتراک ویدیو و صفحات خارجی به عنوان امتیاز منفی در سئو شناخته می‌شد و استفاده از آن توصیه نمی‌شد.
با تغییر الگوریتم ها و متد های گوگل از این پس دیگر iframe هیچ تاثیری در سئو صفحات شما ندارد. به این صورت که در پیمایش ربات های گوگل از خواندن تگ iframe چشم پوشی میشود و ملاک ارزش گذاری وب سایت شما نخواهد بود.
نمونه کد iframe
نمونه ای از کد iframe که یک صفحه را نمایش میدهد و همچنین از خاصیت‌های فعال نیز سعی شده استفاده شود. اگر توجه کنید عرض این iframe به صورت 100% تنظیم شده که این باعث میشود که در صفحه نمایش های مختلف به صورت خودکار عرض فریم تنظیم شود.
<!DOCTYPE html> <html> <body> <h2>Iframe - Target for a Link</h2> <iframe height="300px" width="100%" src="demo_iframe.htm" name="iframe_a"></iframe> <p><a href="https://www.w3schools.com" target="iframe_a">Mizfa.com - Ali Esmaeili HTML Tutorial</a></p> </body> </html>
پایانترم
[box type=”info” class=”question-from-users” width=””]سوال:
از تگ iframe برای چه اهدافی استفاده میشود؟ تا به حال نمونه‌ای از استفاده iframe در وب سایتی مشاهده کرده‌اید؟
به ایمیل کسانی که پاسخ درست و کامل رو در نظرات بگن ۱۰ هزارتومان در پنل کاربری آکادمی میزفا حسابشون شارژ میشه. (البته باید در آکادمی میزفا ثبت‌نام کنید تا بتونید از این امتیاز استفاده کنید.)
[/box]نتیجه گیری
- این تگ دارای معایبیست که عدم تسلط به css می‌تواند باعث باگ‌های mobile friendly شود.
- خاصیت های خاص خودش را دارد.
- تاثیری در سئو وب سایت ندارد.
امیدوارم از این مقاله استفاده کافی را برده باشید. اگر سوالی داشتید حتما بپرسید همیشه آماده پاسخگویی به شما هستیم. این فصل هم تموم شد – تا فصل بعدی…
19 پاسخ
جواب سوال:
تگ iframe در واقع یک دریچه به سوی یک سند html خارجی است که می توان بخشی از یک وبسایت مثل قسمت پخش کننده ویدئو یا نمایش تصویر و … یا یک صفحه از وبسایت را درون آن نمایش داد.
در برخی وبسایت های خبری یا برخی وبسایت های آموزشی یا فروشگاه هایی حاوی فیلم معرفی محصول که یک فیلم را درون سایت هایی مثل یوتیوب یا آپارات آپلود نموده اند ، از این تگ استفاده می شود!
و دو تا سوال هم داشتم:
چطوری iframe رو وسط صفحه بذاریم؟
چطوری میتونیم کاری کنیم ارتفاع و عرض iframe وابسته به صفحه باشه ، مثلا عرض رو من میزنم 100% اما ارتفاع رو نمیشه همزمان با درصد تعیین کرد!
سلام، من یه سوال فنی داشتم
چطور میشه iframe رو با تاخیر بیاریم؟
مثلا میخوام ده تا پشت سر هم بزارم ولی میخوام با اختلاف یک ثانیه همه بیان؟!
سلام
باید به کمک جاوااسکریپت این کار رو انجام بدید
با عرض درود, یه سوال فنی دارم, اینکه وقتی تویه وب کلیک راست میکنیم و گزینه view page source میزنیم فقط کد های اچ تی ام ال اون پیج رو نشون میده, چجوری کد ها css اون پیج رو میتونیم ببینیم؟
سلام علیرضا
توی همون view source کدهای CSS هم میتونه باشه و همینطور فایل های .css هم میتونی بررسی کنی.
یا میتونی کلیک راست کنی و inspect بزنی و کدهای css ببینی.
درود, قسمت src یه مشکلی داره, مثلا بعضی سایتا رو نشون میده, بعضی ها رو نه مثلا وقتی ادرس رو زدم به گوگل یا سایت امازون نوشت که (ادرس سایت) refused to connect ولی وقتی تو تگ a همون ادرسو زدم منو برد به همون سایت پس چرا تو iframe نمیبره؟
سلام علیرضا ، مشکل نداره. اون وب سایت ها iframe restrection دارند و امکان آیفرم کردن وب سایتشون رو بهت نمیدن.
به یک پنجره یا قاب که بتوان در آن محتویاتی همچون تصویر،ویدئو و.. را به نمایش گذاشت گفته می شود.
مثلا در سایتی دیدم که کل سایت رو در یک قاب آورده بود.
نمونه دیگه اینکه ویدیوهای سایت های اشتراک ویدیو را با استفاده از iframe میشه در وبسایت خودمون به نمایش بگذاریم.
بطور کلی با استفاده از iframe میشه یک سایت یا یک فایل یا یک تصویر و یا یک صفحه وب را درون یک صفحه ی وب دیگر قرار داد.
سلام محمد، چقدر خوب توضیح دادی ممنون. درست گفتی.
سلام. ممنون برای آموزش خوبتون
در قالب سایتم در صفحه نخست، یک ویدئو از یوتیوب در IFrame باز میشود. اما وقتی فیلم در حال پخش است اگر فریم را ببندیم، صدای فیلم در حال پخش باقی می ماند! تا زمانیکه صفحه را رفرش کنیم
سپاسگذارم پاسخ بدین
سلام کریمپور، احتمالا شما فقط یک کلید ایجاد کردید که بعد از کلیک روی آن display:none میشود ولی هنوز iframe در حال اجراست. باید از طریق جاوا اسکریپت کلا iframe را حذف کنید.
سلام یک سوال داشتم از خدمتتون. در جواب یکی از دوستان پاسخ دادید:اگر سایت https دارید iframe ها فقط سایت هایی را باز میکنه که https باشه.یعنی اگر سایت httpداشته باشیم فقط سایت های http رو باز میکنه و اگر سایت https داشته باشیم فقط سایت های https رو باز میکنه؟ این موضوع هیچ راه حلی نداره؟
سلام نیما
من نگفتم اگر سایت httpداشته باشیم فقط سایت های http رو میشه iframe کرد.
من گفتم اگر سایت https باشه فقط سایت هایی را میشه iframe کرد که https هستند.
راه حل هم نداره. مگر به جای iframe بیاین یک سری کارهای حرفه ای انجام بدید و با اسکریپت این لود صورت بگیره که در این صورت باید برنامه نویسی کنید.
مینویسه سایت آپلود نشد
حتما آدرس اشتباه میدید مخصوصا اگر در لوکال باشه.
اگر سایت https دارید iframe ها فقط سایت هایی را باز میکنه که https باشه.
سلام ببخشید
کاربرد src تو iframe چی هست؟
سلام حمیدرضا ، سوال به شدت مهمی روی این تگ هست. این خاصیت مهم ترین خاصیت تگ آیفریم به حساب میاد ، چون صفحه ای که میخوایم نمایش بدیم از طریق این خاصیت لینک داده میشه. پس چی شد؟ آدرس اون صفحه ای که میخوایم نمایش بدیم رو از طریق خاصیت src معرفی میکنیم و نمایش میدیم.
ولی من هرچی ادرس سایت دادم همش ارور داد و اجرا نشد
چه اروری؟