این مطلب را به اشتراک بگذارید

آموزش قاب درون خطی (iframe) در HTML

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

قاب درون خطی (iframe) چیست؟

قاب درون خطی (iframe) یک تگ HTML است که صفحه HTML دیگری را در سند بارگیری می کند. در اصل صفحه وب دیگری را در صفحه اصلی قرار می دهد. آنها معمولاً برای تبلیغات، ویدیوهای جاسازی شده، تجزیه و تحلیل وب و محتوای تعاملی استفاده می شوند.

در روزهای بد طراحی وب سایت، تگ های زیادی از <frame> در اطراف آویزان بودند و روز همه را خراب می کردند. آنها تقریبا همیشه رویکرد بدی برای طراحی بودند. خوشبختانه، این تگ <frame> در HTML5 منسوخ شده است ، اما تگ <iframe> “قاب درون خطی” هنوز در دسترس است. آیا باید منسوخ می شد؟ آیا بهتر است فقط از آن اجتناب کنیم؟ کاربردهای معتبری برای این عنصر وجود دارد، اما شما واقعاً باید بدانید که چیست و چگونه کار می‌کند تا از برخی از دام‌هایی که در زمان‌های تاریک بسیار رایج بودند اجتناب کنید .

تگ iframe چگونه کار می کند؟

iframe یک تگ از تگ های HTML است. توسط تمام مرورگرهای وب اصلی پشتیبانی می شود و در آخرین مشخصات HTML5 گنجانده شده است .

هنگامی که مرورگر وب با تگ iframe مواجه می شود، یک محیط سند HTML جدید ایجاد می کند تا محتوای درون آن بارگذاری شود. کد را از src یا srcdoc ارجاع شده می گیرد و آن را به عنوان وب سایت خود ارائه می کند که سپس به طور کامل در صفحه مرور والدین قرار می گیرد. به آن قاب درون خطی می گویند زیرا برای کاربر همه یک صفحه وب است.

کودک iframe یک محیط مرور کامل در قاب والد است. می تواند جاوا اسکریپت و CSS خود را جدا از والد بارگیری کند. همچنین می‌تواند آن‌ها را به‌صورت ناهمزمان از سایت اصلی به‌روزرسانی و بارگذاری کرد.

سایت مادر می تواند جنبه هایی از iframe مانند اندازه، موقعیت و زمینه امنیتی را تعریف کند. مدیران هنگام استفاده از بیش از یک iframe باید احتیاط کنند. از آنجایی که آنها به حافظه و پردازش اضافی نیاز دارند، استفاده بیش از حد از آنها می تواند باعث عملکرد ضعیف صفحه شود. محتوای iframe ممکن است به درستی ایندکس نشده باشد، بنابراین ممکن است بر سئو سایت تأثیر بگذارد.

بیایید یه نمونه از کاربرد تگ iframe رو ببینیم.

<!DOCTYPE html>
<html>
<body>
   <h1>متاوبز</h1>
   <iframe id="inlineFrameExample"
    title="Inline Frame Example"
    width="300"
    height="200"
    src="https://www.openstreetmap.org/export/embed.html?bbox=-0.004017949104309083%2C51.47612752641776%2C0.00030577182769775396%2C51.478569861898606&layer=mapnik">
</iframe>
</body>
</html>

در اینجا ویژگی “src” آدرس وب (URL) صفحه قاب درون خطی را مشخص می کند.

برای بررسی نحوه عملکرد آن در HTML ، قطعه کد بالا را در index.html یا فایل html دیگری که برای این آموزش استفاده می کنید، قرار دهید. نتایج خود را ذخیره کرده و در مرورگر خود بررسی کنید. شما باید چیزی شبیه تصویر زیر مشاهده کنید:

تگ iframe در HTML
تگ iframe در HTML

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

می توانید عرض و ارتفاع iframe را با استفاده از ویژگی های “width” و “height” تنظیم کنید. به‌طور پیش‌فرض، مقادیر ویژگی‌ها بر حسب پیکسل مشخص می‌شوند، اما می‌توانید آن‌ها را بر حسب درصد نیز تنظیم کنید. یعنی 50٪، 40٪ و …

مانند :

<!DOCTYPE html>
<html>
<body>
   <h1>متاوبز</h1>
   <iframe id="inlineFrameExample"
    title="Inline Frame Example"
    width="40%"
    height="30%"
    src="https://www.openstreetmap.org/export/embed.html?bbox=-0.004017949104309083%2C51.47612752641776%2C0.00030577182769775396%2C51.478569861898606&layer=mapnik">
</iframe>
</body>
</html>

حاشیه قاب درون خطی را بردارید

به طور پیش فرض، قاب درون خطی حاوی یک حاشیه در اطراف آن است. با استفاده از ویژگی <style> و ویژگی حاشیه CSS می توانید مرز را حذف کنید با دستور style= “border:none;”.

شما همچنین می توانید اندازه، رنگ، سبک حاشیه iframe را تغییر دهید.

مانند:

<!DOCTYPE html>
<html>
<body>
   <h1>متاوبز</h1>
   <iframe id="inlineFrameExample"
    title="Inline Frame Example"
    width="40%"
    height="30%"
    style= "border:5px tomato solid;"
    src="https://www.openstreetmap.org/export/embed.html?bbox=-0.004017949104309083%2C51.47612752641776%2C0.00030577182769775396%2C51.478569861898606&layer=mapnik">
</iframe>
</body>
</html>

نتایج خود را ذخیره کرده و در مرورگر خود بررسی کنید. شما باید چیزی شبیه تصویر زیر مشاهده کنید:

تگ iframe در HTML
تگ iframe در HTML

تگ iframe چگونه استفاده می شود؟

رایج ترین استفاده از تگ iframe بارگذاری محتوا از سایت دیگری در صفحه است. سایت فرزند می‌تواند محتوا و کوکی‌های خود را بارگیری کند، بنابراین سایت‌ها ممکن است در جایی که اجازه محتوای لینک مستقیم را نمی‌دهند، به آن اجازه دهند. استفاده از iframe روش پذیرفته شده برای جاسازی یک ویدیوی YouTube یا محتوای Google Maps است.

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

همچنین ممکن است از یک iframe برای بارگیری محتوای صفحه پویا یا در حال تغییر استفاده شود. به عنوان مثال، یک وب سایت مستندسازی ساده را تصور کنید. سایت والد لیستی از صفحات را در سمت چپ صفحه نمایش می دهد و یک iframe در مرکز صفحه دارد. وقتی کاربر برای مشاهده در منو روی صفحه کلیک می‌کند، می‌تواند محتوای داخل iframe را بدون دور شدن از صفحه اصلی بارگیری کند.

استفاده از iframe برای محتوای پویا ساده و موثر است، اما محبوبیت آن کم شده است. روش های جدید ایجاد محتوای وب پویا با استفاده از HTML پویا و AJAX در حال حاضر رایج تر است. چنین روش هایی می توانند سایت های تعاملی و یکپارچه تری نسبت به استفاده از iframe برای بارگذاری یک صفحه ثابت دیگر ایجاد کنند.

استفاده از تگ iframe
استفاده از تگ iframe

با استفاده از این تگ ویدیوی YouTube را جاسازی کنید

همچنین می توانید با استفاده از تگ <iframe> یک ویدیوی YouTube را در صفحه وب خود اضافه کنید. ویدیوی پیوست شده در صفحه وب شما پخش می شود و همچنین می توانید ارتفاع، عرض، پخش خودکار و بسیاری ویژگی های دیگر را برای ویدیو تنظیم کنید.

در زیر چند مرحله برای افزودن ویدیوی YouTube به صفحه وب خود آورده شده است:

  1. به ویدیوی YouTube بروید که می‌خواهید آن را جاسازی کنید.
  2. بر روی SHARE ➦ زیر ویدیو کلیک کنید.
  3. روی گزینه Embed <> کلیک کنید.
  4. کد HTML را کپی کنید.
  5. کد را در فایل HTML خود قرار دهید.
  6. تغییر ارتفاع، عرض و سایر خصوصیات (بر اساس نیاز).

قدرتمند، اما آسان برای سوء استفاده

وب سایت هایی که از عناصر iframe استفاده می کنند ذاتاً نسبت به سایر سایت ها امنیت کمتر یا بیشتر ندارند. استفاده قانونی از iframe توسط سایت کنترل می شود و مشمول جداسازی امنیتی مرورگر وب است . با این حال، مدیران سایت باید مراقب باشند که هر سایتی که در iframe جاسازی می‌کنند قابل اعتماد و قابل اعتماد باشد.

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

مزایا و معایب Iframe

استفاده از این تگ مزایا و معایبی دارد، از جمله:

مزایا

  • آسان برای استفاده.
  • به خوبی پشتیبانی می شود.
  • امکان جاسازی محتوای شخص ثالث را فراهم می کند.
  • محدودیت های CORS را دور می زند.

معایب

  • حافظه و پردازنده سنگین.
  • بدون کنترل سایت های شخص ثالث.
  • استفاده در طراحی واکنشگرا دشوار است.
  • ممکن است بر سئو تاثیر بگذارد.

درباره HTML بیشتر بخوانید و حرفه ای شوید:

می توانید در تلگرام با تیم مجموعه متاوبز در ارتباط باشید.

نویسنده
مدیریت طراحی
مدیریت طراحی

نظرات

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

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

موضوعات پربیننده

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