HTML5 kom med alle nye APIer, nye inntastetyper og attributter for skjemaer. Som det er tilfelle, de store tilleggene ofte skjuler de små oppgraderingene, og jeg tror at dette er spesielt sant for nedlastingsattributtet.
Som du vet, er det noen filer som nettleseren ikke laster ned automatisk; bilder, andre nettsider og avhengig av innstillingene i nettleseren din, noen ganger også PDF-filer. Nedlastingsattributtet gir nettleseren en innfødt måte å laste ned disse filene automatisk, uten å måtte falle tilbake på JavaScript. Dette er veldig nyttig for alle apper som omhandler nedlasting av bilder, for eksempel bildeopplastingsnettsteder.
Siden nedlastingsattributtet ikke bruker skript av noe slag, er det like enkelt som å legge til attributtet til koblingen din:
var a = document.createElement('a');if(typeof a.download != "undefined"){// download attribute is supported}else{// download attribute is not supported}Med tanke på alt som er lagt til i HTML5, er nedlastingsattributtet en svært liten del, men etter min mening er det et attribut som var lenge forsinket, og har definitivt bruk i dagens apps for både brukervennlighet og forenkling.
Har du implementert nedlastingsattributtet? Hva er dine onde helter med HTML5? Gi oss beskjed i kommentarene.
Utvalgt bilde / miniatyrbilde, laste ned bilde via Shutterstock.
![]( myFolder / myImage.png "last ned> Last ned bilde </a></pre></div><p> Det som er bra med dette attributtet er at du selv kan sette et navn for den nedlastbare filen, selv om det ikke er navnet på serveren din. Dette er flott for nettsteder med komplekse filnavn, eller til og med dynamisk opprettede bilder, som vil gi et enkelt og brukervennlig filnavn. For å gi et navn, legger du bare til et like tegn, etterfulgt av navnet du vil bruke omgitt av sitater, slik som: </p><div class=pre-wrap><pre><code class=){kind=link}
![var a = document.createElement('a');if(typeof a.download != "undefined"){// download attribute is supported}else{// download attribute is not supported}]( myFolder / reallyUnnecessarilyLongAndComplicatedFileName.png "download =" myImage "> Last ned bilde</a></pre></div><p> Merk at nettleseren automatisk legger til den riktige filutvidelsen til den nedlastede filen, slik at du ikke trenger å inkludere det inne i attributtverdien din. </p><p class=clearrow></p><h2> Nettleserstøtte </h2><p> For øyeblikket støtter bare Chrome 14+ og Firefox 20+ nedlastingsattributtet, så du må kanskje falle tilbake på noen enkle JavaScript for å oppdage om attributtet støttes. Du kan gjøre slikt: </p><div class=pre-wrap><pre><code class=){kind=link}