تگ 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

پایانترم

[box type=”info” class=”question-from-users” width=””]

سوال:

از تگ iframe برای چه اهدافی استفاده می‌شود؟ تا به حال نمونه‌ای از استفاده iframe در وب سایتی مشاهده کرده‌اید؟

به ایمیل کسانی که پاسخ درست و کامل رو در نظرات بگن ۱۰ هزارتومان در پنل کاربری آکادمی میزفا حسابشون شارژ میشه. (البته باید در آکادمی میزفا ثبت‌نام کنید تا بتونید از این امتیاز استفاده کنید.)

[/box]

نتیجه گیری

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

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

فیلم آموزشی asp.net core 2

علی اسماعیلی
درباره خودم گفتن یا نوشتن کار آسونی نیست. باید تو کم‌ترین حجم مهم‌ترین اطلاعات رو بنویسی. وقتی که اولین بار دستم به کیبورد خورد، ۶ سالم بود. حس جالبی بود؛ زندگیم شده بود ۴ تا کلید WASD روی کیبورد کامپیوتر برای کنترل ماشین. از ۱۰ سالگی که مادرم با فوتوشاپ کار می‌کرد کنارش نشستم و یاد گرفتم. ۱۳ سالم بود که اولین وب‌سایتم رو با پی اچ پی نیوک ایجاد کردم. تا الان وب سایت‌های زیادی رو شروع کردم و شاید به خاطر اینکه هدف تجربه کردن رو داشتم شکست خوردند. موفق‌ترین پروژه شکست خوردم رو می‌تونم اوکسو معرفی کنم که شاید اسمش رو شنیده باشید. الانم دارم کار‌هایی رو شروع می‌کنم چون با خودم عهد کرده بودم که تا بیست سالگی جاهای مختلفی کار کنم و تجربه کنم و بعد از تجربیاتم استفاده کنم. بعد از رسیدن به بیست سالگی خوشحالم که یکی از تجربیات خوبم همکاری با میزفاست و دارم ادامش میدم…
سرفصل های آموزش HTML
پایین سرفصل های HTML هست، روی منم کلیک کنی میتونی ببینی.
فصل ۸ – کار با جدول در HTML

روی فصل بالا کلیک کنید.

ازمون HTML شرکت کن

روی لینک بالا کلیک کن

فیلم آموزشی asp.net core 2

19 نظر

19 پاسخ

  1. جواب سوال:
    تگ iframe در واقع یک دریچه به سوی یک سند html خارجی است که می توان بخشی از یک وبسایت مثل قسمت پخش کننده ویدئو یا نمایش تصویر و … یا یک صفحه از وبسایت را درون آن نمایش داد.
    در برخی وبسایت های خبری یا برخی وبسایت های آموزشی یا فروشگاه هایی حاوی فیلم معرفی محصول که یک فیلم را درون سایت هایی مثل یوتیوب یا آپارات آپلود نموده اند ، از این تگ استفاده می شود!

    و دو تا سوال هم داشتم:
    چطوری iframe رو وسط صفحه بذاریم؟
    چطوری میتونیم کاری کنیم ارتفاع و عرض iframe وابسته به صفحه باشه ، مثلا عرض رو من میزنم 100% اما ارتفاع رو نمیشه همزمان با درصد تعیین کرد!

  2. سلام، من یه سوال فنی داشتم
    چطور میشه iframe رو با تاخیر بیاریم؟
    مثلا میخوام ده تا پشت سر هم بزارم ولی میخوام با اختلاف یک ثانیه همه بیان؟!

    1. سلام
      باید به کمک جاوااسکریپت این کار رو انجام بدید

  3. با عرض درود, یه سوال فنی دارم, اینکه وقتی تویه وب کلیک راست میکنیم و گزینه view page source میزنیم فقط کد های اچ تی ام ال اون پیج رو نشون میده, چجوری کد ها css اون پیج رو میتونیم ببینیم؟

    1. سلام علیرضا
      توی همون view source کدهای CSS هم میتونه باشه و همینطور فایل های .css هم میتونی بررسی کنی.
      یا میتونی کلیک راست کنی و inspect بزنی و کدهای css ببینی.

  4. درود, قسمت src یه مشکلی داره, مثلا بعضی سایتا رو نشون میده, بعضی ها رو نه مثلا وقتی ادرس رو زدم به گوگل یا سایت امازون نوشت که (ادرس سایت) refused to connect ولی وقتی تو تگ a همون ادرسو زدم منو برد به همون سایت پس چرا تو iframe نمیبره؟

    1. سلام علیرضا ، مشکل نداره. اون وب سایت ها iframe restrection دارند و امکان آیفرم کردن وب سایتشون رو بهت نمیدن.

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

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

    1. سلام محمد، چقدر خوب توضیح دادی ممنون. درست گفتی.

  6. سلام. ممنون برای آموزش خوبتون
    در قالب سایتم در صفحه نخست، یک ویدئو از یوتیوب در IFrame باز میشود. اما وقتی فیلم در حال پخش است اگر فریم را ببندیم، صدای فیلم در حال پخش باقی می ماند! تا زمانیکه صفحه را رفرش کنیم
    سپاسگذارم پاسخ بدین

    1. سلام کریمپور، احتمالا شما فقط یک کلید ایجاد کردید که بعد از کلیک روی آن display:none میشود ولی هنوز iframe در حال اجراست. باید از طریق جاوا اسکریپت کلا iframe را حذف کنید.

  7. سلام یک سوال داشتم از خدمتتون. در جواب یکی از دوستان پاسخ دادید:اگر سایت https دارید iframe ها فقط سایت هایی را باز میکنه که https باشه.یعنی اگر سایت httpداشته باشیم فقط سایت های http رو باز میکنه و اگر سایت https داشته باشیم فقط سایت های https رو باز میکنه؟ این موضوع هیچ راه حلی نداره؟

    1. سلام نیما
      من نگفتم اگر سایت httpداشته باشیم فقط سایت های http رو میشه iframe کرد.
      من گفتم اگر سایت https باشه فقط سایت هایی را میشه iframe کرد که https هستند.
      راه حل هم نداره. مگر به جای iframe بیاین یک سری کارهای حرفه ای انجام بدید و با اسکریپت این لود صورت بگیره که در این صورت باید برنامه نویسی کنید.

    1. حتما آدرس اشتباه میدید مخصوصا اگر در لوکال باشه.
      اگر سایت https دارید iframe ها فقط سایت هایی را باز میکنه که https باشه.

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

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.

حداکثر حجم فایل برای آپلود: 1 مگابایت. فایل‌های مجاز برای آپلود: عکس, ویس, ویدیو, ورد یا پی دی اف, فایل متنی, زیپ. شما می‌تونید برای بهتر پرسیدن سوالتون، عکس یا ویس یا حتی فیلم در بخش نظرات میزفا آپلود کنید. برای ضبط ویس می‌تونید از خود واتس آپ استفاده کنید و بعد اینجا آپلود کنید و برای ارسال عکس هم کافی هست اسکرین شات بگیرید. Drop file here

با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

عضویت در خبرنامه هفتگی برای دریافت:

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
فیلم آموزشی asp.net core 2
ترک میزفا خوب نیست!
معرفی جامع‌ترین ابزار سئو در ایران
بالای ۱۰ هزار عضو
PHZpZGVvIHdpZHRoPSI2MDAiIGhlaWdodD0iMzUwIiBwb3N0ZXI9Imh0dHBzOi8vbWl6ZmEuY29tL2Jsb2cvd3AtY29udGVudC91cGxvYWRzLzIwMjMvMDUvcG9zdGVyLW1pemZhLXRvb2xzLXZpZGVvLW1pbi5wbmciIGNvbnRyb2xzIHByZWxvYWQ9Im5vbmUiPiANCiAgIDxzb3VyY2Ugc3JjPSJodHRwczovL21pemZhLmNvbS9ibG9nL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDIzLzA1L21pemZhX3Rvb2xzXzcyMHAubXA0IiB0eXBlPSJ2aWRlby9tcDQiPg0KPC92aWRlbz4=