آموزش زبان HTML (جلسه ۶۷)

آشنایی با تگ iframe در اچ تی ام ال (HTML)

زمانیکه بخواهیم یک صفحه اچ تی ام ال (HTML) دیگر را داخل صفحه اصلی خود به نمایش در آوریم می بایست از تگ هایی تحت عنوان <iframe> و <iframe/> استفاده کنیم. برای درک این موضوع ابتدا یک فایل جدید تحت عنوان second-page.html می سازیم و آن را به صورت زیر تکمیل می کنیم:

<!DOCTYPE html>
<html>
     
    <head>
        <meta charset="utf-8">
        <title>صفحه دوم</title>
    </head>
     
    <body>
        <h1>صفحه دوم</h1>
        <p>قرار است این صفحه را داخل صفحه اصلی نمایش دهیم</p>
    </body>
</html>

پس از اجرای کد فوق در مرورگر خروجی زیر را مشاهده خواهیم کرد:

xsecondPage.jpg.pagespeed.ic.eNji3tCzwx

حال فایل اصلی خود تحت عنوان index.html را به صورت زیر تکمیل می کنیم:

<!DOCTYPE html>
<html>
   
   <head>
       <meta charset="utf-8">
       <title>asrefonon</title>
   </head>
   
   <body>
       <iframe src="second-page.html" width="400" height="200"></iframe>
   </body>
</html>

همانطور که در کد فوق ملاحظه می شود داخل تگ <body> از تگی تحت عنوان <iframe> استفاده کرده ایم. Attribute یی تحت عنوان src این وظیفه را دارا است تا مسیر فایلی که می خواهیم داخل تگ <iframe> به نمایش در آید را مشخص سازد. علاوه بر این با استفاده از دستورات width و height می توان ابعاد این تگ را مشخص ساخت. حال با ذخیره کردن فایل خود آن را در مرورگر به اجرا می کنیم:

xiframe_tag_in_html.jpg.pagespeed.ic.AnxInmKVcW

چنانچه بخواهیم حاشیه دور تگ <iframe> از بین رود، کد فوق را به صورت زیر تکمیل می کنیم:

   <body>
       <iframe src="second-page.html" width="400" height="200" frameborder="0"></iframe>
   </body>

مجدد مرورگر را به روز رسانی می کنیم:

xframeborder_attribute_in_html

می بینیم که حاشیه تگ <iframe> از بین رفته است.
چنانچه بخواهیم یک وب سایت دیگر داخل تگ <iframe> به نمایش در آوریم می بایست کد فوق را به صورت زیر بازنویسی نماییم:

<body>
        <iframe src="http://www.w3schools.com" width="300" height="200" frameborder="no"></iframe>
    </body>

مجدد مرورگر را به روز رسانی می کنیم:

xurl_in_iframe_in_html

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

<body>
        <iframe src=" " width="300" height="200" name="test-frame"></iframe>
        <p>
            <a href="http://www.w3school.com/" target="test-frame">لینک</a>
        </p>
    </body>

ابتدا کد فوق را اجرا کرده سپس به توضیح پیرامون آن خواهیم پرداخت:

xopening_a_link_url_in_an_i

با کلیک روی عبارت لینک خواهیم دید که داخل تگ <iframe> آدرس مرتبط با لینک باز خواهد شد:

xurl_opening_in_html_iframe_tag

اولین کاری که در تگ <iframe> انجام داده ایم این است که با استفاده از Attribute یی تحت عنوان name نامی همچون test-frame در نظر گرفته ایم. از آنجا که قرار نیست خود تگ <iframe> مسیری را برای نمایش دادن دنبال کند، از اینرو هیچ چیزی مقابل Attribute یی تحت عنوان src نمی نویسیم. سپس در تگ <a> مقدار target را برابر با نام تگ <iframe> یا همان test-frame قرار داده ایم. اگر خاطرمان باشد دیدیم زمانیکه می خواستیم یک لینک در Tab جدید در مرورگر باز شود از دستور blank_ استفاده می کردیم. در این مثال به جای آنکه از دستور blank_ استفاده کنیم فقط کافی است تا نامی که برای <iframe> در نظر گرفتیم را مقابل target بنویسیم.

221

اسماعیلی هستم مدیر عصر فنون. فارغ التحصیل مقطع کارشناسی ارشد رشته مهندسی فناوری اطلاعات (IT)

پیشنهاد لحظه ای
ارسال دیدگاه

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

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.

توسط
تومان