Snabbtips Använd attributet HTML5 Download

Att skapa en hämtningslänk i HTML är enkelt; lägg till en ankaremärke och peka på filen i filen href attribut. Vissa filtyper (t.ex. bilder, .pdf, .txt och .doc till exempel) laddas inte ner. De kommer istället att öppnas i webbläsaren.

Om du har åtkomst till serverns sida på din webbplats finns det några lösningar du kan använda, till exempel konfigurering av .htaccess, att ladda ner dessa filer direkt. Om din webbplats är värd med en gratis tjänst som WordPress.com, Blogspot eller Github-sidor som inte tillåter dig att göra det, överväg att använda ladda ner attribut.

Använda "Download" Attribut

De ladda ner attributet är en del av HTML5-specifikationen och uttrycker en länk som ladda ner länk snarare än a navigerings länk.

De ladda ner attributet tillåter dig även att byta namn på filnamnet vid nedladdning. När filen finns på servern, speciellt om den genererats automatiskt kan den namnges systematiskt med siffror och bindestreck, till exempel acme-doc-2.0.1.txt. Det skulle vara bättre för användarna att ta emot filen med ett mer förnuftigt namn när de laddades ner, kanske som: Acme-dokumentation (ver 2.0.1) .txt (inte glömma filtillägget).

Så här ser det ut i praktiken:

Hämta text 

Ge det ett försök på demoversidan, och du ska hitta filen som hämtats med det namn som anges i ladda ner attribut.

Ett par anteckningar:

• Firefox tillåter bara användare att ladda ner filer med samma ursprung på grund av ett säkerhetsproblem. Filen måste komma från din egen server eller domännamn, annars öppnas det i webbläsaren.
• Medan du hämtar filer med korsprung är tillåtet i Chrome och den senaste Operaen (med Chromium / Blink), ignorerar de båda attributvärdet. Med andra ord är filnamnet oförändrat.

Tillhandahåller Fallback

Vid skrivningstidpunkten, den ladda ner attributet är ännu inte implementerat i Safari och (som du kan förvänta dig) Internet Explorer. Säger att enligt modern IE-status är den för närvarande överst på utvecklingslistan och får en hel del röster. 

Under tiden kan vi lägga till en anständig återgång, till exempel att ge extra instruktioner under nedladdningslänken för icke-stödjande webbläsare. För att göra det måste vi ladda ner Modernizr med ladda ner funktionstest ingår.

Då kan vi lägga till följande skript.

om (! Modernizr.adownload) var $ link = $ ('a'); $ link.each (funktion () var $ download = $ (detta) .attr ('download'); om (typ av $ nedladdning! == typ av odefinierad && $ download! == false) var $ el = $ '
') .addClass (' download-instruction '). text (' Högerklicka och välj "Hämta länkad fil" '); $ El.insertAfter ($ (this)); );  

Skriptet testar om webbläsaren stöder ladda ner attribut; Om inte kommer det att lägga till en ny 

 med klassen för styling ändamål samt instruktionstexten, och sätt in den direkt under en länk som har blivit inredd med ladda ner attribut.

Textinstruktionen visas i Safari.

Avslutar

De ladda ner Attribut gör att hanteringshämtningslänkar är mycket praktiska för alla som inte har tillgång till serverns konfiguration. Jag ser fram emot att Internet Explorer och Safari implementerar ladda ner attribut snart!

Webbdesign