100% کامل شده تا

Iframeها در اچ‌تی‌ام‌ال (HTML Iframes)

از موتو کد، دانشنامهٔ برنامه‌نویسی


Iframe برای نمایش صفحه وب داخل همان صفحه وب به کار می‌رود.[۱]


Responsive demo.svg

شیوه نوشتار دستور Iframe

تگ <iframe> در HTML، یک فریم درون خطی را تعریف می‌کند.

یک قاب درون خطی برای جاسازی (embed) سند دیگری در سند HTML فعلی استفاده می‌شود.

Syntax:

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


نکته: این کار خوبی است که همیشه یک ویژگی title برای <iframe> قرار دهید. این مورد توسط خوانندگان صفحه (screen readers) برای خواندن محتوای iframe استفاده می‌شود.


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

برای مشخص کردن اندازهٔ iframe از ویژگی‌های width و height استفاده کنید.

به‌طور پیش‌فرض عرض و ارتفاع به پیکسل هستند:

مثال

<iframe src="demo_iframe.htm" height="200" width="300" title="Iframe Example"></iframe>

مثال

<!DOCTYPE html>
<html>
<body>

<h2>HTML Iframes</h2>
<p>You can use the height and width attributes to specify the size of the iframe:</p>

<iframe src="demo_iframe.htm" height="200" width="300" title="Iframe Example"></iframe>

</body>
</html>


یا می‌توانید ویژگی style را اضافه کنید و از ویژگی‌های width و height در CSS استفاده کنید:

مثال

<iframe src="demo_iframe.htm" style="height:200px;width:300px;" title="Iframe Example"></iframe>

مثال

<!DOCTYPE html>
<html>
<body>

<h2>HTML Iframes</h2>
<p>You can also use the CSS height and width properties to specify the size of the iframe:</p>

<iframe src="demo_iframe.htm" style="height:200px;width:300px" title="Iframe Example"></iframe>

</body>
</html>





Iframe - حذف لبه (Border)

به‌طور پیش‌فرض، یک iframe در اطراف خود کادر یا border دارد.

برای حذف لبه، ویژگی style را اضافه کرده و از خصوصیت border در CSS استفاده کنید:

مثال

<iframe src="demo_iframe.htm" style="border:none;" title="Iframe Example"></iframe>

مثال

<!DOCTYPE html>
<html>
<body>

<h2>Remove the Iframe Border</h2>
<p>To remove the default border of the iframe, use CSS:</p>

<iframe src="demo_iframe.htm" style="border:none;" title="Iframe Example"></iframe>

</body>
</html>


توسط CSS می‌توانید سایز، استایل و رنگ کادر iframe را نیز تغییر دهید:

مثال

<iframe src="demo_iframe.htm" style="border:2px solid red;" title="Iframe Example"></iframe>

مثال

<!DOCTYPE html>
<html>
<body>

<h2>Custom Iframe Border</h2>
<p>With CSS, you can also change the size, style and color of the iframe's border:</p>

<iframe src="demo_iframe.htm" style="border:2px solid red;" title="Iframe Example"></iframe>

</body>
</html>



Target برای یک لینک

یک iframe را می‌توان بعنوان فریم هدف برای یک پیوند استفاده کرد.

ویژگی target یک لینک، باید به ویژگی name در iframe ارجاع داده شود:

مثال

<iframe src="demo_iframe.htm" name="iframe_a" title="Iframe Example"></iframe>

<p><a href="https://www.w3schools.com" target="iframe_a">W3Schools.com</a></p>

مثال

<!DOCTYPE html>
<html>
<body>

<h2>Iframe - Target for a Link</h2>

<iframe src="demo_iframe.htm" name="iframe_a" height="300px" width="100%" title="Iframe Example"></iframe>

<p><a href="https://www.w3schools.com" target="iframe_a">W3Schools.com</a></p>

<p>When the target attribute of a link matches the name of an iframe, the link will open in the iframe.</p>

</body>
</html>



خلاصهٔ بخش

تگ <iframe> در HTML، یک فریم درون خطی را تعریف می‌کند
ویژگی src، آدرس وب (URL) صفحه جاسازی شده را مشخص می‌کند
همیشه یک ویژگی title قرار دهید (برای خوانندگان صفحه)
از ویژگی‌های width و height برای مشخص کردن اندازهٔ iframe استفاده کنید
استفاده از ویژگی border:none; برای حذف لبهٔ اطراف iframe


تگ iframe در HTML


منابع آموزشی




به‌روزرسانی شده: ۳۵ روز پیش