iFrame برای قاب درون خطی (Inline Frame) است. این یک عنصر قدرتمند در طراحی وب است. احتمالاً فیلم های بی شماری از یوتیوب را در سایتهای غیر از یوتیوب که جاسازی شده مشاهده کرده اید. آی فریم می تواند همه نوع رسانه را وارد کند. و بنابراین ممکن است تعجب کنید که چگونه این کار انجام می شود. احتمال دارد که طراح وب عنصر آی فریم را در آن صفحه قرار دهد.
در این مقاله، نگاهی دقیق تر به iFrame و چگونگی استفاده از آن خواهیم داشت و در مورد چیزهای دیگری که قبل از گذاشتن یک iFrame در سند HTML خود مورد توجه قرار می گیرد، صحبت خواهیم کرد.
آی فریم چیست؟
iFrame یک فریم در یک فریم است. این یک جزء عنصر HTML است که به شما امکان می دهد اسناد، فیلم ها و رسانه های تعاملی را در یک صفحه جاسازی کنید. با این کار می توانید یک صفحه وب ثانویه را در صفحه اصلی خود نمایش دهید.
عنصر iFrame به شما امکان می دهد بخشی از مطالب را از منابع دیگر درج کنید. این می تواند محتوا را در هر نقطه در صفحه شما ادغام کند، بدون آنکه آنها را مانند یک عنصر سنتی در ساختار چیدمان وب شما وارد کند.
شما نباید از iFrame بیش از حد استفاده کنید. این می تواند صفحه شما را کند کرده و خطرات امنیتی را ایجاد کند، به خصوص اگر از یک وب سایت مشکوک استفاده می کنید. به عنوان بخشی از مطالب خود در مورد آی فریم فکر کنید، اما بخشی از سایت شما نیست.
به عنوان مثال، اگر می خواهید یک فیلم یوتیوب را برای تحریک خوانندگان خود اضافه کنید، می توانید یک عنصر iFrame را در آن مطلب وارد کنید.
نحوه استفاده از iFrame
اکنون می دانید که iFrame یک عنصر اضافی برای به اشتراک گذاری محتوا از سایت های دیگر است. شما می توانید آن را اضافه کنید تا زمینه ای درباره موضوع خاص به خوانندگان داده شود. با استفاده از برچسب <iframe> می توانید یک عنصر iFrame را در یک سند HTML وارد کنید.
کدهای زیر را کپی کرده و آن را در notepad بچسبانید و پرونده را با فرمت .html ذخیره کنید:
<iframe src="https://www.youtube.com/embed/dXBohfjc4WA" width="680" height="480" allowfullscreen></iframe>
کد فوق یک فیلم آموزشی یوتیوب را نشان می دهد. بیایید هر برچسب را بطور جداگانه بررسی کنیم:
- از تگ
<iframe>
…</iframe>
برای گنجاندن فیلم در iFrame استفاده می شود. - iFrame
(src)
منشأ محتوا از سرور خارجی یا داخلی است. فراموش نکنید که کد تعبیه شده را در URL قرار دهید. - عرض و ارتفاع، نسبت ابعاد iFrame است. می توانید اندازه های ثابت مانند 480 680 پیکسل (px) را مانند مثال درج کنید. یا می توانید از روش مبتنی بر درصد (10%-100%) استفاده کنید تا iFrame بطور خودکار تنظیم شود.
تهدیدات امنیتی
طبیعتاً، عنصر iFrame هیچ خطری برای امنیت صفحه وب یا خوانندگان شما ایجاد نمی کند. تا حدی، برای کمک به سازندگان محتوا مطالبی را که به صورت بصری در اختیار خوانندگان قرار می دهند افزوده شده است. با این وجود، هنگام افزودن آی فریم از وب سایت غیر قابل اعتماد، پرهیز کنید.
در سال 2008 افزایش برخی از تزریق کد iFrame در برخی وب سایت های قانونی مانند اخبار ABC وجود داشت. این نوع حمله، بازدید کنندگان را به یک سایت مخرب هدایت می کند، که در این صورت ویروس به رایانه بازدید کنندگان نصب می شود و یا اقدام به سرقت اطلاعات حساس می کند.
به همین دلیل توصیه نمی شود که iFrame را به عنوان جزئی جدایی ناپذیر در وب سایت خود قرار دهید.
اگر فکر می کنید وب سایتی ایمن نیست، حتی زحمت پیوند دادن به آن را به خود ندهید و محتوای آن را در عنصر iFrame خود قرار ندهید.
جمع بندی
در کل، اگر می خواهید تعامل بیشتری برای بازدید کنندگان خود داشته باشید، آی فریم یک عنصر قدرتمند است. اما باید توجه داشته باشید که نباید از آی فریم بیش از حد استفاده کنید. البته بهتر است اگر توانستید، سایت خود را بدون iFrame توسعه دهید. اگر هنوز هم می خواهید از آن برای اهداف توسعه استفاده کنید، فقط به خاطر داشته باشید که از یک سایت قابل اعتماد استفاده کنید. امیدواریم که این مقاله به شما در پیاده سازی و درک آی فریم کمک کند.
بسیار عالی. سپاس از شما