نمایش محتوای سایت در سایت دیگر

آموزش ویدئویی نمایش یک سایت در سایت دیگر

در این فیلم و آموزش ویدئویی با نمایش یک سایت در سایت دیگر و تگ iframe و ویژگی های آن آشنا می شوید.

چنانچه مشکلی در اجرای فیلم دارید از مرورگر فایرفاکس استفاده نمایید یا روی لینک زیر کلیک نمایید.

مشاهده یا دانلود فیلم بالا

در این بخش از آموزش html از تاپ سایت 98 به سراغ نمایش یک سایت در سایت دیگر می رویم.

بعضی مواقع نیاز است سایتی را در سایت خودمان یا یک صفحه html نمایش دهیم برای این کار می توانیم از دستور iframe در html استفاده نماییم.

در این آموزش ، نمایش یک سایت در سایت دیگر را بصورت کامل توضیح می دهیم. حالت های مختلف را بررسی می کنیم. می توانیم در سایزهای مختلف سایت را نمایش دهیم ، میتوانیم کادری دور آن ایجاد کنیم . میتوانیم برای آن لینک ایجاد کنیم. ما همه روشها را تست می کنیم.

دستور iframe برای نمایش سایت

دستور iframe برای نمایش سایت در سایت دیگر استفاده می شود. در src می بایست آدرس سایت را قرار دهیم.

<iframe src="https://topsite98.com/"></iframe>

دستور بالا را در بخشی از صفحه html کپی کنید. فایل را اجرا نمایید.

مشاهده می کنید در کادری وبسایت ، تاپ سایت 98 ، نمایش داده می شود.

اگر می خواهید اندازه iframe را تغییر دهید می توانید ادامه آموزش را ببینید.

نمایش سایت در سایت دیگر با اندازه مشخص

برای نمایش یک سایت در سایت دیگر با اندازه مشخص می توانید از چند روش استفاده کنید.

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

<iframe src="https://topsite98.com/" width="600" height="500"></iframe>

خروجی را در تصویر زیر می بینید.

استفاده از css برای نمایش سایت

استفاده از css برای نمایش سایت در سایت دیگر و مشخص کردن عرض و ارتفاع باکس iframe را در مثال زیر می بینید.

در مثال زیر ما با استفاده از style توانستیم عرض و ارتفاع باکس iframe را مشخص کنیم.

<iframe src="https://topsite98.com/" style="height:700px;width:700px;"></iframe>

کادر دور iframe

کادر دور iframe را می توانیم با استفاده از css تغییر دهیم.

اگر دقت نمایید کادری دور باکس iframe قرار دارد .

برای حذف کادر دور باکس نمایش سایت می توانیم با دستور border آن را حذف نماییم. اگر مقدار border را none قرار دهید کادر حذف می شود.

<iframe src="https://topsite98.com/" width="600" height="500" style="border: none"></iframe>

 همچنین می توانیم کادری دور آی فریم iframe بیندازیم.

برای این کار می توانیم مطابق دستور زیر برای border مقداری را مشخص کنیم. در دستور زیر یک کادر با سایز 6 پیکسل و رنگ قرمز دور iframe می افتد .

<iframe src="https://topsite98.com/" width="600" height="500" style="border: 6px solid red"></iframe>

خروجی را در تصویر زیر می بینید.

نمایش یک سایت در سایت دیگر با کلیک

برای نمایش یک سایت در سایت دیگر با کلیک می توانیم از تگ a استفاده کنیم.

برای این کار مطابق مثال زیر عمل نمایید. ابتدا iframe را قرار دهید فقط در src چیزی ننویسید و آدرس خالی باشد.

به iframe یک ویژگی name بدهید و مقدار آن را topsite98 بگذارید.

سپس یک تگ a در زیر iframe قرار داده و در ویژگی href آدرس تاپ سایت 98 را قرار دهید.

در ویژگی target مقدار topsite98 (نام iframe) قرار دهید.

<iframe src="" name="topsite98" width="600" height="400" style="border: 6px solid red"></iframe>
<p><a href="https://topsite98.com/" target="topsite98">topsite98.com</a></p>

با کلیک روی متن لینک ، سایت در سایت ما نمایش داده می شود.

امیدواریم این آموزش برای شما عزیزان مفید باشد. کدها تست شده می باشد.

موفق باشید.