آموزش رایگان HTML: قسمت هفدهم: آموزش تگ iframe در html

iframe در html

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

زمان مورد نیاز برای مطالعه: ۵ دقیقه

iframe در html

برای ایجاد یک iframe در html از دستور زیر باید استفاده کنید.

<iframe src="URL"></iframe>

این تگ دارای ویژگی‌های مختلفی به شرح زیر می‌باشد:

  1. src: این ویژگی جهت تنظیم آدرس سایت مورد نظر است.
  2. srcdoc: با استفاده از این ویژگی می‌توان قطعه کد htmlای را در داخل سایت نشان داد.
  3. name: با استفاده از این ویژگی می‌توان نامی را برای تگ مورد نظر تنظیم نمود.
  4. height: این ویژگی برای تنظیم ارتفاع محتوای iframe است.
  5. width: با استفاده از این ویژگی عرض محتوای نمایش داده شده را می‌توان تنظیم نمود.
  6. sandbox: با استفاده از این ویژگی تنظیماتی برای محتوای نمایش داده شده می‌توان قرار داد.

در مثال زیر سایت Gmail در یک تگ iframe بارگذاری شده است.

iframe در html

ویژگی‌های width و height برای iframe در html

با استفاده از این دو ویژگی می‌توان ارتفاع و عرض iframe را به صورت پیکسلی تنظیم نمود. مقادیر پیش‌فرض ارتفاع ۱۵۰px و مقدار پیش‌فرض عرض ۳۰۰px می‌باشد.

<!DOCTYPE html>
<html>
<head>
  <title>Iframe</title>
  <meta charset="UTF-8">
</head> 
<body>

<iframe src="https://www.aparat.com/video/video/embed/videohash/TxyzB/vt/frame" title="آموزش رایگان vmware Workstation : قسمت اول" width= 500 height = 400
      style="border:1px solid black"></iframe>
</body>
</html>

در تصویر زیر نمونه‌ای از خروجی تگ iframe به همراه کد html آن نمایش داده شده است.

iframe در html

ارتفاع و عرض iframe را با کدهای css نیز می‌توان مقداردهی کرد.

<iframe src='url'
      style="width:۳۰۰px;height:۱۰۰px;border:1px solid black"></iframe>

در css با استفاده از vw (viewport window)و vh (viewport height) نیز می‌توان عرض و ارتفاع را بر اساس درصدی از سایز صفحه نمایش مقداردهی کرد.

  1. ۲۰vw = 20% Viewport Width
  2. ۱۰۰vw = 100% Viewport Width
  3. ۲۰vh = 20% Viewport Height
  4. ۱۰۰vh = 100% Viewport Height
<iframe src='url'
      style="border:1px solid black;width:100%;height:100vh;"></iframe>

نکته کاربردی: اگر بخواهید مطلبی یا فیلمی را از یوتیوب در سایت خود قرار دهید، کافی است به youtube بروید و با کلیک بر روی دکمه share و انتخاب گزینه embed تگ iframe مربوط به آن محتوا را کپی کرده و در سایت خود استفاده کنید. به تصویر زیر دقت کنید.

iframe در html

ویژگی srcdoc

با استفاده از ویژگی srcdoc می‌توان قطعه کد htmای را در تگ iframe لود کرد.

  <iframe srcdoc="<h3>This is an iframe</h3>" id ="myframe"
      height ="100"
      style="border:1px solid black"></iframe>

ویژگی name برای تگ iframe در html

با استفاده از ویژگی name می‌توان برای تگ iframe نامی را انتخاب کرد و از این نام برای ویژگی target تگ لینک استفاده کرد.

<!DOCTYPE html>
<html>
<head>
  <title>iframe name</title>
  <meta charset="UTF-8">
</head>
<body>
  <h3>iframe - name:</h3>
  <a href="#" target="myframe">Open Link in 'myframe'</a>
  <br/><br/>
  <iframe src='https://www.bamadoon.com/'
         style="border:1px solid black" name="myframe"></iframe>
  <br/>
</body>
</html>

ویژگی sandbox

ویژگی sandbox برای اعمال محدودیت‌های بیشتر بر روی تگ iframe در html استفاده می‌شود. در واقع اگر در تگ iframe ویژگی sandbox را به تنهایی به صورت زیر قرار دهید محدودیت‌هایی شامل موارد زیر بر روی iframe اعمال می‌شوند.

<iframe src="" sandbox></iframe>
  1. فرم‌ها در iframe غیرفعال می‌شوند.
  2. مودال‌های alert، confirm، prompt جاوااسکریپتی غیرفعال می‌شوند.( modal، پنجره کوچکی که با کلیک بر روی یک دکمه باز می‌شود و پیغام یا ساختاری را نمایش می‌دهد، است.)
  3. APIها را غیرفعال ‌می‌کند. (APIها در واقع مجموعه‌ای از توابع است که با استفاده از آن‌ها می‌توان با سرویس‌ها یا سیستم عامل یا یک منبع خارجی دیگر ارتباط برقرار کرد)
  4. دستوارتی مانند embed و object را غیرفعال می‌کند.
  5. دستورات جاوااسکریپتی را غیرفعال می‌کند.

با استفاده از دستور allow-forms در ویژگی sandbox استفاده از فرم‌ها فعال می‌شود.

<iframe src="" sandbox="allow-forms"></iframe>

دستور allow-modals اجازه کار کردن توابع مودالی جاواسکریپتی را می‌دهد.

<iframe src="" sandbox="allow-modals"></iframe>

دستور allow-popups به iframe اجازه می‌دهد تا با اعمال دستوراتی که نیاز به باز شدن یک پنجره جدید دارند، پنجره جدیدی را باز کنند.

<iframe src="" sandbox="allow-popups"></iframe>

با دستور allow-scripts اجازه فعال شدن دستورات جاوااسکریپتی را به iframe در html داده می‌شود.

<iframe src="" sandbox="allow-scripts"></iframe>

سخن پایانی

در این قسمت سعی کردیم شما را با کاربرد دستور iframe در html آشنا کنیم. این دستور برای مواقعی که بخواهید یک محتوا از یک سایت دیگر را در سایت خود بارگذاری کنید، استفاده می‌شود.

قسمت قبلی: قسمت شانزدهم: آموزش ایجاد لیست در html

آموزش‌های مرتبط با این مطلب

منبع: بامادون

کپی و نشر مطلب با ذکر منبع و نام نویسنده بلامانع است.

زهرا فتوحی نیا وب‌سایت
کارشناسی ارشد هوش مصنوعی و عاشق برنامه‌نویسی و طراحی وب
برچسب‌ها:

نظر دادن یک نوع هنر است! نظر شما چیست؟