چگونه از خصوصیت download در html5 استفاده نماییم

مترجم :داریوش ببریان html web development تاریخ درج : 1394/09/24

زبان html5 با تعداد زیادی از چهره ها و آبجکت های جدید به نام API به وجود آمده است و آنها را در اختیار طراحان وب سایت قرار میدهد. مانند به وجود آمدن فرم های جدید و خصوصیت مربوط به آنها. البته در ابتدا شاید بعضی از آنها برای طراحان طراحی سایت مبهم باشد و برای استفاده از آن باید در ابتدا تحقیق نمایند تا کاربرد درست آن را متوجه شوند. یکی از این ها خصوصیت download میباشد.

همانطور که همه شما میدانید بسیاری از فایل ها مستقیما توسط مرورگر کاربر دانلود نمیشود مانند تصاویر و یا صفحات وب سایت که کاملا بستگی به آن دارد که تنظیمات مرورگر شما چگونه باشد. یکی از معروفترین این فایل ها PDF میباشد. این attribute مستقیما به مرورگر می گوید که این فایل را با هر تنظیماتی دانلود نماید, بدون اینکه بخواهیم از زبان های دیگر مانند جاوا اسکریپت استفاده نماییم. این خصوصیت و قابلیت های آن مخصوصا برای صفحات وب سایت یا نرم افزارهایی بیشتر مفید خواهد شد که با فایل ها سروکار دارد.

استفاده از خصوصیت download برای تگ ها در زبان HTML

اگر بخواهیم از این خصوصیت استفاده نماییم به قطعه کد زیر توجه نمایید

Download image

یکی از نکات قابل توجه برای این attribute این است که شما حتی میتوانید نام فایلی که باید دانلود شود را ذکر نمایید, حتی زمانی که فایل مربوطه بر روی سرور شما هم قرار ندارد. این قابلیت برای وب سایت هایی که سیستم نامگذاری فایل های آن بسیار پیچیده میباشد مفید است, یا مانند تصاویری که به صورت داینامیک ایجاد میشوند. برای دادن نام کافی است در قالب یک value در داخل آن attribute بنویسیم مانند قطعه کد زیر:

Download image

شما لازم ندارید که دقیقا به پسوند فایل مورد نظر یا Extension آن اشاره نمایید, چراکه مرورگر این کار را برای شما انجام خواهد داد.

پشتیبانی مرورگرها

در حال حاضر تنها مرورگرهای Chrome14+ و Firefox20+ از این attribute استفاده مینمایند, بنابراین فعلا شما لازم دارید تا کمی کد جاوااسکریپت هم برای آن بنویسید و با این کد بررسی نمایید که آیا این قابلیت در مرورگر کاربر پشتیبانی میشود یا خیر. به کد زیر توجه فرمایید:

var a = document.createElement('a');

if(typeof a.download != "undefined")
{
   // download attribute is supported
}
else
{
  // download attribute is not supported
}

نتیجه گیری

به هر قابلیتی که به زبان HTML5 اضافه شود به خوبی دقت و فکر نمایید, این خصوصیت یک بخش کوچکی از این زبان بزرگ میباشد.

امیداریم در این مقاله از سلسله مقاله های طراحی وب سایت و سئو و بهینه سازی سایت که در شرکت اطلس وب برای شما تهیه و تدوین شده است توانسته باشیم کمی از قابلیت های این زبان طراحی وبسایت و بسیار کارآمد را به شما معرفی نموده باشیم. تا مقاله های بعدی حتما منتظر باشید.

هر روز از مقاله های جدید طراحی سایت در کانال تلگرام ما با خبر شوید
0 تعداد بازدید

برای داشتن شغلی مطمئن روی لینک زیر کلیک کنید

آموزش طراحی سایت