امتیاز دهید:

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

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

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

secondPage

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

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

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

iframe tag in html

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

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

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

frameborder attribute in html iframe

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

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

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

url 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>

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

opening a link url in an iframe in html

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

url opening in html iframe tag

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


نظرات
نظرات
  • siavash :

    خدا خیرتون بده دمتون گرم واقعا


    1396/07/17 12:31:39
  • محمد امین :

    خیلی عالی و کاربردی بود دستتون درد نکنه شاد و سربلند باشید


    1396/05/18 16:37:25
  • هادی :

    سلام با مرورگر اکسپلور میشه ولی با موزیلا نمیشه صفحات سایت هایی رو که آدرس میدیم میاره تو اکسپلور ولی موزیلا نمیاره اگه راهنمایی کنین ممنون میشم


    1394/11/01 17:13:55
  • behnam :

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


    1394/05/22 14:41:07
  • محمد :

    با سلام
    ممنون از اطلاعات خوبتان


    1394/03/19 09:49:32
  • امیرکشوری :

    سلام تشکر از سایت خوبتون بسیار عالی بود.


    1394/02/26 06:16:14
  • vahid :

    در پاسخ به yaser

    سلام
    راهی وجود داره که یک بخش خاص از یک صفحه را بشود توسط ای فریم در سایت مان نمایش بدهیم؟
    مثلا 100 پیکسل از بالا و 200 پیکسل از سمت چپ را ندیده بگیریم و بقیه را لود کنیم!

    سلام اره فکر کنم با css میتونی جاشو مشخص کنی هم با margin میشه هم با position


    1393/12/11 07:40:05
  • سعید :

    در پاسخ به farzam

    سلام من سایتم جای تست کردم بهم اخطار داد واسه تگ Iframe حقیقا بلد نیستم راهنماییم میکیند.....

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


    1393/11/16 05:02:07
  • yaser :

    سلام
    راهی وجود داره که یک بخش خاص از یک صفحه را بشود توسط ای فریم در سایت مان نمایش بدهیم؟
    مثلا 100 پیکسل از بالا و 200 پیکسل از سمت چپ را ندیده بگیریم و بقیه را لود کنیم!


    1393/11/09 23:26:35
  • بهزاد مرادی :

    در پاسخ به شاهین

    سلام و عرض خسته نباشید
    من یک اسلایدر ساختم که هر عکسی یه لینک داره تو اسلایدر . قرار این اسلایدر رو تو صفحه اصلی یک سایت دیگه بصورت آی فریم بالا بیارم . با این کد که مورد تایید گوگل :

    [Your user agent does not support frames or is currently configured
    not to display frames. However, you may visit
    the related document.]

    وارد برنامه میشم و آی فریم درست بارگذاری میشه . مشکلی که دارم اینه که وقتی رو عکس های اسلایدر کلیک میکنم بجای اینکه یه تب جدید باز شه یا تو صفحه مادر اصلی لینک عکس باز شه باندازه خود آی فریم وارد لینک میشه و تو صفحه مادر و اصلی تغییری ایجاد نمیشه .یکی از دوستان راهنماییم کرد که از کد اتریبیوت target="parent" استفاده کنم اما جواب نمیده یا من درست تو برنامه وارد نمیکنم .



    سلام،
    برای این Attribute مقدار _blank را بنویسید درست می شود.


    با سپاس فراوان
    بهزاد مرادی
    دپارتمان تولید محتوای نت شهر


    1393/06/29 06:45:45
  • شاهین :

    سلام و عرض خسته نباشید
    من یک اسلایدر ساختم که هر عکسی یه لینک داره تو اسلایدر . قرار این اسلایدر رو تو صفحه اصلی یک سایت دیگه بصورت آی فریم بالا بیارم . با این کد که مورد تایید گوگل :

    [Your user agent does not support frames or is currently configured
    not to display frames. However, you may visit
    the related document.]

    وارد برنامه میشم و آی فریم درست بارگذاری میشه . مشکلی که دارم اینه که وقتی رو عکس های اسلایدر کلیک میکنم بجای اینکه یه تب جدید باز شه یا تو صفحه مادر اصلی لینک عکس باز شه باندازه خود آی فریم وارد لینک میشه و تو صفحه مادر و اصلی تغییری ایجاد نمیشه .یکی از دوستان راهنماییم کرد که از کد اتریبیوت target="parent" استفاده کنم اما جواب نمیده یا من درست تو برنامه وارد نمیکنم .


    1393/06/24 17:33:14
  • بهزاد مرادی :

    در پاسخ به amir

    سلام
    ببينيد من برنامه نويس نيستم
    براي منظور خودم توي نت سرچ كردم و اين كد رو پيدا كردم



    ولي نميدونم چطوري ازش استفاده كنم، اگح ممكنه با توضيح راهنمائيم كنيد



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

    با تشکر
    مرادی
    تیم تولید محتوای نت شهر


    1393/06/20 05:00:13
  • amir :

    سلام
    ببينيد من برنامه نويس نيستم
    براي منظور خودم توي نت سرچ كردم و اين كد رو پيدا كردم



    ولي نميدونم چطوري ازش استفاده كنم، اگح ممكنه با توضيح راهنمائيم كنيد


    1393/06/19 12:35:15
  • بهزاد مرادی :

    در پاسخ به amir

    سلام
    خيلي ممنون از آموزشتون
    اگه ميشه راهنمائي كنيد كه چطور ميتونم iframe رو طوري تنظيم كنم كه عنوان آخرين مطالب ارسالي در يك سايت رو (بصورت لينك دار) در سايت html ديگرم قرار بدم
    يعني هر وقت پست جديدي در سايت x ميدم عنوان پست كه حاوي لينك پست هم هست در سايت y قرار بگيره، لطفا راهنمائي كنيد خيلي گيره كارم



    سلام،
    اینکار با زبان PHP امکان پذیر است.



    با سپاس
    بهزاد مرادی
    تیم تولید محتوای نت شهر


    1393/06/19 11:50:19
  • amir :

    سلام
    خيلي ممنون از آموزشتون
    اگه ميشه راهنمائي كنيد كه چطور ميتونم iframe رو طوري تنظيم كنم كه عنوان آخرين مطالب ارسالي در يك سايت رو (بصورت لينك دار) در سايت html ديگرم قرار بدم
    يعني هر وقت پست جديدي در سايت x ميدم عنوان پست كه حاوي لينك پست هم هست در سايت y قرار بگيره، لطفا راهنمائي كنيد خيلي گيره كارم


    1393/06/19 10:00:23
  • بهزاد مرادی :

    در پاسخ به mnr73

    سلام من این کار رو با سایت گوگل یا حتی نتشهر امتحان کردم نشد ولی با همون سایتی که شما گذاشتید امتحان کردم و شد. آیا به دلیل طراحی سایت مبدا هستش؟


    سلام،
    مطمئن شوید که http را اول آدرس خود قرار می دهید.


    با سپاس فراوان
    بهزاد مرادی
    تیم تولید محتوای نت شهر


    1393/05/26 06:21:36
  • mnr73 :

    سلام من این کار رو با سایت گوگل یا حتی نتشهر امتحان کردم نشد ولی با همون سایتی که شما گذاشتید امتحان کردم و شد. آیا به دلیل طراحی سایت مبدا هستش؟


    1393/05/25 09:55:43
  • sajjad :

    سلام
    ممنون از اموزش مفیدتون


    1393/03/20 14:03:43
  • بهزاد :

    در پاسخ به farzam

    سلام من سایتم جای تست کردم بهم اخطار داد واسه تگ Iframe حقیقا بلد نیستم راهنماییم میکیند.....

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


    1393/03/17 06:56:46
  • farzam :

    سلام من سایتم جای تست کردم بهم اخطار داد واسه تگ Iframe حقیقا بلد نیستم راهنماییم میکیند.....


    1393/03/15 22:38:57
  • fatemeh :

    هرچی لازم بود فهمیدم
    بسیار بسیار ممنون


    1393/03/05 07:58:34