حل مشکلات در انجمن آل ارورز

آموزش تگ iframe در اچ تی ام ال (HTML)

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

آموزش تگ iframe در اچ تی ام ال (HTML)

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

آموزش تگ iframe در اچ تی ام ال (HTML)

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

آموزش تگ iframe در اچ تی ام ال (HTML)

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

آموزش تگ iframe در اچ تی ام ال (HTML)

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

آموزش تگ iframe در اچ تی ام ال (HTML)

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

آموزش تگ iframe در اچ تی ام ال (HTML)

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

آموزش تگ iframe در اچ تی ام ال (HTML)

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

آموزش تگ iframe در اچ تی ام ال (HTML)

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

برای این منظور کد فوق را به صورت زیر بازنویسی می کنیم:

آموزش تگ iframe در اچ تی ام ال (HTML)

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

آموزش تگ iframe در اچ تی ام ال (HTML)

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

آموزش تگ iframe در اچ تی ام ال (HTML)

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

www.allerrors.ir

پاسخی بنویسید

ایمیل شما منتشر نمی شود.