سلام خدمت تمامی دوستان و همراهان محترم ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش تگ iframe در HTML با من همراه باشید.
آی فریم یا Iframe به یک پنجره یا قاب که بتوان در آن محتویاتی همچون تصویر،ویدئو و.. را به نمایش گذاشت گفته می شود. آی فریم ها در نوبه ی خودشون میتونن استفاده های زیادی داشته باشند.
پس بطور کلی ما با استفاده از آی فریم یا به انگلیسی Iframe میتونیم به راحتی یک سایت یا یک فایل یا یک تصویر و یا بطور کلی میتوان یک صفحه وب را درون یک صفحه ی وب دیگر قرار داد.
برای ایجاد یا استفاده از آی فریم ها یا Iframes در HTML ما باید از تگ <iframe> استفاده نماییم، شکل کلی برای استفاده از این تگ در HTML بصورت زیر می باشد.
<iframe src="URL"></iframe>
که میتوانیم با وارد کردن آدرس فایل/سایت و.. مورد نظرمان در قسمت src آن را در یک قاب یا آی فریم به نمایش دربیاوریم.
حال برای اینکه بطور کامل با این تگ آشنا شوید لطفا به دستورات زیر توجه و همچنین برای مشاهده آنلاین دستورات بروی دکمه (امتحان کنید) کلیک نمایید.
<body>
<iframe src="https://free-learn.ir"></iframe>
</body>
امتحان کنید
حال اگر بروی دکمه (امتحان کنید) کلیک نمایید میتوانید مشاهده نمایید که به راحتی و با استفاده از تگ <iframe> ما تونستیم وبسایت فری لرن را در قالب یک آی فریم به نمایش دربیاوریم.
ما با استفاده از صفات width و height به ترتیب میتونیم اندازه عرض و ارتفاع یک آی فریم را مشخص نماییم که البته ما با استفاده از صفت Style یا بطور کلی با استفاده از CSS نیز میتوانیم این اندازه را تنظیم نماییم.
<body>
<iframe src="https://free-learn.ir" width="400" height="350"></iframe>
</body>
امتحان کنید
اگر در مثال های قبلی به آی فریم توجه کرده باشید، بصورت پیش فرض یک حاشیه یا بوردِر یا یک خط به دور لبه ی آی فریم قرار گرفته است، در صورتی که بخواهیم این حاشیه را حذف کنیم باید از ویژگی Border موجود در دستورات CSS استفاده نماییم.
<body>
<iframe src="https://free-learn.ir" style="border:none;"></iframe>
</body>
امتحان کنید
فرض کنید یک یا چند لینک در صفحه داریم و میخواهیم وقتی کاربر بروی لینک ها کلیک کرد مقصد لینک ها درون آی فریم باز شود، برای اینکار ما باید ۲ کار زیر را انجام دهیم :
nameTarget لینک هابرای مثال لطفا به دستورات زیر توجه نمایید :
<body>
<iframe src="#" name="free-learn"></iframe>
<a href="https://free-learn.ir" target="free-learn">click kon</a>
</body>
امتحان کنید
همانطور که خروجی را مشاهده مینمایید ما با استفاده از صفت name یک نام برای آی فریم مشخص کردیم سپس در صفت target موجود در تگ لینک نامی را که برای آی فریم تنظیم کرده بودیم را قرار دادیم، حال با کلیک بروی لینک (کلیک کنید) مقصد لینک درون آی فریم باز خواهد شد.
مثال شماره ۱ : (نمایش یک تصویر در آی فریم) (کلیک کنید)
مثال شماره ۲ : (نمایش یک فایل HTML در آی فریم) (کلیک کنید)
مثال شماره ۳ : (نمایش چندین وبسایت بصورت همزمان در آی فریم) (کلیک کنید)
منبع: سایت آموزشی فری لرن
برای مشاهده آموزش های بیشتر و همچنین دانلود فایل PDF این آموزش لطفا به سایت مراجعه نمایید.
