آشنایی با iframe در HTML

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


 در iframe زیر میتوانید صفحه ی معرفی دوره HTML5 را مشاهده کنید.


نحو (سینتکس) iframe

یک iframe در HTML با استفاده از تگ <iframe> تعریف میشود :

<iframe src="URL"></iframe>

صفت src آدرس اینترنتی صفحه ای را که میخواهیم نمایش دهیم مشخص میکند.


تنظیم طول و عرض برای iframe

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

به صورت پیشفرض واحد دو صفت ذکر شده (طول و عرض) پیکسل است. اما میتوان از درصد نیز استفاده نمود (برای مثال "80%").

<iframe src="demo_iframe.html" height="200" width="300"></iframe>
خودتان امتحان کنید

حذف border برای iframe

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

با اضافه کردن صفت style  و استفاده از خاصیت border در CSS میتوانید border پیشفرض را از بین ببرید :

<iframe src="demo_iframe.html" style="border:none;"></iframe>
خودتان امتحان کنید

با استفاده از CSS همچنین میتوانید اندازه، استایل و رنگ border در iframe را تغییر دهید :

<iframe src="demo_iframe.html" style="border:2px solid grey;"></iframe>
خودتان امتحان کنید

صفحه ی مقصد برای یک لینک

یک iframe میتواند صفحه ی مقصدی برای یک لینک باشد.

صفت target  برای یک لینک با نام مشخص شده برای iframe مقدار دهی میشود :

<iframe src="demo_iframe.html" name="iframe_a"></iframe>

<p><a href="http://www.learnsource.net" target="iframe_a">learnsource.net</a></p>
خودتان امتحان کنید

 

منتشر شده در ۱۲ خرداد ۱۳۹۶ حمید رضا ملکی ۱۱۱۳ بازدید
دیدگاه ها
احمد ایرانپور پنجشنبه ۲۵ مرداد ۱۳۹۷

با درود من مشکلی نداشتم در این زمینه. واقعا جالب و قشنگه این مبحث. آموزشها هم عالیه.ممنون از زحماتتون

حمید رضا ملکی پنجشنبه ۲۵ مرداد ۱۳۹۷

سلام. خوشحالم که براتون مفید بوده

وحید دوشنبه ۲۵ تیر ۱۳۹۷

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

حمید رضا ملکی دوشنبه ۲۵ تیر ۱۳۹۷

سلام. باید بررسی کنید دقیقا مطابق کد های بالا باشه. مشکلی در کد ها وجود نداره. احتمالا لینکتون را صحیح نمیذارید. در یکی از خودتان امتحان کنید ها لینک یک سایت را کامل از قسمت نوار آدرس مرورگر کپی کنید و در قسمت src قرار بدید سپس روی دکمه ی اجرا کلیک کنید.