آموزش HTML - فریم درون‌خطی

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

ایجاد iframe (فریم درون‌خطی)

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

سنتکس Iframe

سنتکس زیر برای ایجاد یک فریم درون‌خطی (iframe) در HTML استفاده می‌شود:

<iframe src="url" title="description"></iframe>

ویژگی src

آدرس URL یا مسیر سند خارجی با استفاده از ویژگی src در تگ <iframe> ضمیمه می‌شود. اگر محتوای iframe از ناحیه مستطیلی مشخص‌شده فراتر رود، HTML به‌طور خودکار نوار پیمایش (Scrollbar) را اضافه می‌کند. HTML اجازه استفاده از هر تعداد iframe را می‌دهد، اما این کار ممکن است روی عملکرد و سرعت وب‌سایت تأثیر بگذارد.

مثال Iframe

مثال زیر نحوه ایجاد یک iframe در HTML را نشان می‌دهد:

<!DOCTYPE html>
<html>
  <head>
    <title>HTML Iframes</title>
  </head>
  <body>
    <p>It is an example of HTML Iframe</p>
    <iframe src="/html/menu.htm"> Sorry your browser does not support inline frames. </iframe>
  </body>
</html>

ویژگی‌های تگ <iframe>

جدول زیر ویژگی‌های مورد استفاده در تگ <iframe> را توصیف می‌کند.

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

شما می‌توانید ارتفاع و عرض یک iframe در HTML را با استفاده از ویژگی‌های height و width در تگ <iframe> تنظیم کنید.

مثال

مثال زیر نحوه تنظیم ارتفاع و عرض یک iframe را نشان می‌دهد:

<!DOCTYPE html>
<html>
  <head>
    <title>HTML Iframes</title>
  </head>
  <body>
    <h2>Example of Setting Height and width of HTML Iframe</h2>
    <iframe src="/index.htm" width="500" height="300"> 
    Sorry your browser does not support inline frames. 
    </iframe>
  </body>
</html>

کد بالا صفحه وب "index.htm" را داخل یک iframe با ارتفاع و عرض مشخص‌شده نمایش می‌دهد.

لینک دادن به یک Iframe: ویژگی‌های Target و Name

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

شما می‌توانید با استفاده از ویژگی name در تگ <iframe>، یک iframe مقصد برای لینک (هایپرلینک) ایجاد کنید. مقدار ویژگی name در ویژگی target عنصرهایی مانند <form> و <a> قرار می‌گیرد تا فریم مقصد را مشخص کند.

مثال

مثال زیر نحوه ساخت یک iframe مقصد برای هایپرلینک را نشان می‌دهد:

<!DOCTYPE html>
<html>
  <head>
    <title>HTML Iframes</title>
  </head>
  <body>
    <h2>Linking to an Iframe: Target and Name Attributes</h2>
    <p>Click on the link below to load the content inside the specified frame...</p>
    <p><a href="/html/iframes.htm" target="Iframe">
      Iframe Tutorial
      </a>
    </p>
    <iframe style="background-color: skyblue;" name="Iframe" width="500" height="300">
    Sorry your browser does not support inline frames.
    </iframe>
  </body>
</html>

پس از اجرا، کد بالا یک لینک و یک Iframe با پس‌زمینه آبی آسمانی ایجاد می‌کند. وقتی روی لینک کلیک شود، محتوای آن داخل iframe باز خواهد شد.

استایل‌دهی به Iframe

شما همچنین می‌توانید از ویژگی‌های style یا class برای اعمال قوانین CSS روی یک iframe استفاده کنید.

مثال

مثال زیر نحوه اعمال استایل‌های CSS به یک iframe را نشان می‌دهد:

<!DOCTYPE html>
<html>
  <head>
    <title>HTML Iframes</title>
    <style type="text/css">
      body{
        background-color: #FFF4A3;
      }
      .my_iframe{
        width: 90%;
        height: 180px;
        border: 2px solid #f40;
        padding: 8px;
      }
    </style>
  </head>
  <body>
    <h2>Example of Styling Iframe</h2>
    <iframe src="/index.htm" class="my_iframe"> 
    Sorry your browser does not support inline frames. 
    </iframe>
  </body>
</html>

چندین Iframe

شما می‌توانید چندین سند (صفحه وب) را درون یک صفحه وب جاسازی کنید. HTML به شما اجازه می‌دهد از چندین تگ <iframe> در یک سند HTML استفاده کنید.

نکته: استفاده از چندین iframe ممکن است سرعت بارگذاری صفحه شما را کاهش دهد.

مثال

در مثال زیر، با استفاده از چندین iframe سه صفحه وب را جاسازی می‌کنیم:

<!DOCTYPE html>
<html>
  <head>
    <title>HTML Iframes</title>
    <style type="text/css">
      body{
        background-color: #FFF4A3;
      }
      .my_iframe{
        width: 90%;
        height: 180px;
        border: 2px solid #f40;
        padding: 8px;
        margin-bottom: 8px;
      }
    </style>
  </head>
  <body>
    <h2>Example of Multiple Iframes</h2>
    <h3>Index Page</h3>
    <iframe src="/index.htm" class="my_iframe"> 
    Sorry your browser does not support inline frames. 
    </iframe>
    <h3>Tutorials Library</h3>
    <iframe src="/tutorialslibrary.htm" class="my_iframe"> 
    Sorry your browser does not support inline frames. 
    </iframe>
    <h3>Compilers</h3>
    <iframe src="/codingground.htm" class="my_iframe"> 
    Sorry your browser does not support inline frames. 
    </iframe>        
  </body>
</html>