نحوه استفاده از ویژگی دانلود در html5
چهارشنبه 3 شهریور 1395زبان برنامه نویسی html5 با بسیاری از حالت ها و امکانات تازه با عنوان API ایجاد شده است و همه این امکانات را برای استفاده در اختیار کسانی که به طراحی سایت مشغولند گذاشته است.
چگونه از ویژگی download در html5 بهره بگیریم
زبان برنامه نویسی html5 با بسیاری از حالت ها و امکانات تازه با عنوان API ایجاد شده است و همه این امکانات را برای استفاده در اختیار کسانی که به طراحی سایت مشغولند گذاشته است. از جمله از این امکانات ایجاد پلتفرم های تازه ای است که هر یک ویژگی های خاصی دارند. شاید در وهله نخست استفاده از آنها کمی برای طراحان سایت دارای ابهام باشد به همین خاطر لازم است طراحان سایت قبل از شروع به کار اندکی درباره آنها تحقیق کنند تا نحوه صحیح به کارگیری آنها را یاد بگیرند و به درستی از آنها در طراحی سایت خود استفاده کنند. یکی از این ویژگی ها دانلود است.
همانگونه که حتما تجربه کرده اید خیلی از فایل ها به طور مستقیم به وسیله مرورگرها قابل دانلود نیستند نظیر عکس ها و یا صفحه هایطراحی سایت که تنظیمات خاصی را در مرورگر شما نیاز دارند. یکی از مشهورترین این فایل ها مربوط به فایل های پی دی اف است که این attribute به طور مستقیم به مروزگرها دستور می دهد تا این فایل ها را با هر گونه تنظیماتی دانلود کند، بدون اینکه نیازی به زبان های دیگر نظیر جاوا اسکریپت باشد. این ویژگی و امکانات آن علی الخصوص برای صفحه های فروشگاه ساز یا طراحی سایت یا نرم افزارهایی کاربرد دارد که با فایل ها در ارتباط هستند.
بهره گیری از ویژگی دانلود برای تگ های طراحی سایت در زبان برنامه نویسی HTML
اگر قصد داشته باشید از این ویژگی بهره بگیرید به کد زیر نگاه کنید:
<a href="/myFolder/myImage.png" download>Download image</a>
یکی از نکته های مهم برای این attribute آن است که شما حتی قادرید عنوان فایلی که باید دانلود شود را نیز بنویسید، حتی هنگامی که فایل موردنظر بر روی سرور تان نباشد. این امکان برای طراحی سایت هایی که سیستم اسم گذاری فایل های آن خیلی سخت است خیلی مناسب می باشد، یا مثلا درمورد عکس هایی که به حالت داینامیک موجود هستند. برای اسم گذاری فقط باید در قالب یک value در درون آن attribute را تایپ کنید همانند کد زیر:
<a href="/myFolder/reallyUnnecessarilyLongAndComplicatedFileName.png" download="myImage">Download image</a>
با این کار دیگر نیازی ندارید که پسوند فایل مربوطه یا 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 افزوده شود به دقت توجه کنید و درباره اش تحقیق و تامل کنید، این ویژگی یک قسمت ناچیز از این زبان برنامه نویسی گسترده است.
- HTML
- 1k بازدید
- 1 تشکر