تگ iframe در HTML

طراحی سایت

..تگ iframe در HTML..
طراحی سایت

تگ iframe در HTML

تگ 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 در SEO
تاثیر iframe در SEO

تا همین چند سال پیش استفاده از 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>
خروجی نمونه iframe
خروجی نمونه iframe

نتیجه گیری

  • این تگ دارای معایبیست که عدم تسلط به css می‌تواند باعث باگ‌های mobile friendly شود.
  • خاصیت های خاص خودش را دارد.
  • تاثیری در سئو وب سایت ندارد.

امیدوارم از این مقاله استفاده کافی را برده باشید. اگر سوالی داشتید حتما بپرسید همیشه آماده پاسخگویی به شما هستیم. این فصل هم تموم شد – تا فصل بعدی…

11
06 آبان 1398
..نظرات..
..مقالات پربازدید..
طراحی سایت

آموزش قرعه کشی در اینستاگرام

  آموزش قرعه کشی در اینستاگرام   با سلام خدمت دوستان و کاربران گرامی . امروز با آموزش قرعه کشی در اینستاگرام برای کسانی که علاقه به ایجاد کمپین های تبلیغاتی دارند در خدمت شما هستیم . بحث قرعه کشی در اینستاگرام با توجه به فراگیر شدن این شبکه اجتماعی که البته امروزه زیرمجموعه فیسبوک مطرح میشود ، زیاد شده است . البته این احتمال وج...

6435
24 فروردین 1398
برنامه نویسی

ویژگی های جدید لاراول 5.8

تغییرات لاراول 5.8 LARAVEL ورژن بعدی فریم ورک لاراول با نسخه ۵.۸ در ماه فوریه سال ۲۰۱۹ منتشر میشه. در حال حاظر تنها مواردی که قطعی شده پشتیبانی لاراول ۵.۸ از کتابخانه carbon نسخه ۲ می باشد. و قابلیت امکان سوییچ بین هر دو نسخه یک و دو carbon مورد دیگر استفاده laravel 5.8 از vlucas/phpdotenv ورژن 3 برای فایل .env میباشد که اجازه استف...

609
08 اسفند 1397
برنامه نویسی

آموزش کار با افزونه دکان (چند فروشندگی)

آموزش کار با افزونه دکان (چند فروشندگی) افزونه دکان در طراحی سایت فروشگاهی مورد استفاده قرار می گیرد. طراحی سایت در این مورد به گونه ای است که در یک وب سایت، چندین فروشنده امکان قرار دادن و فروش محصولات خود را، در پنل های جداگانه دارند. برای عضویت و قرار دادن محصولات در آن ابتدا وارد وب سایت مورد نظر که با افزونه دکان ایجاد شده است، شوید....

539
04 دی 1397