Hurtig Tips Bruke HTML5 Download Attributt

Å lage en nedlastingskobling i HTML er enkel; legg til en ankermerke og pek på filen i href Egenskap. Noen filtyper (for eksempel bilder, .pdf, .txt og .doc for eksempel) blir ikke lastet ned. De vil i stedet bli åpnet i nettleseren.

Hvis du har server-side tilgang til nettstedet ditt, er det noen løsningsmuligheter du kan bruke, for eksempel konfigurering av .htaccess, å laste ned disse filene direkte. Hvis nettstedet ditt er vert med en gratis tjeneste som WordPress.com, Blogspot eller Github-sider som ikke tillater deg å gjøre det, bør du vurdere å bruke nedlasting Egenskap.

Bruke "Download" Attributtet

De nedlasting Attributtet er en del av HTML5-spesifikasjonen og uttrykker en link som nedlasting lenke i stedet for a navigasjons link.

De nedlasting Attributt lar deg også omdøpe filnavnet ved nedlasting. Når filen ligger på serveren, spesielt hvis den er generert automatisk, kan den bli navngitt systematisk med tall og bindestreker, for eksempel Acme-doc-2.0.1.txt. Det ville være bedre for brukerne å motta filen med et mer fornuftig navn når de lastes ned, kanskje som: Acme-dokumentasjon (ver. 2.0.1) .txt (ikke glemme filtypen).

Slik ser det ut i praksis:

Last ned tekst 

Prøv det på demoversiden, og du vil finne filen lastet ned med navnet som er angitt i nedlasting Egenskap.

Et par notater:

• Firefox tillater bare brukere å laste ned filer av samme opprinnelse på grunn av et sikkerhetsproblem. Filen må komme fra din egen server eller domenenavn, ellers vil den bli åpnet i nettleseren.
• Mens du laster ned filer med kryssopprinnelse, er det tillatt i Chrome, og den nyeste Operaen (med krom / blink), vil de begge ignorere attributtverdien. Med andre ord, vil filnavnet forbli uendret.

Gir tilbakebetaling

På tidspunktet for skriving, den nedlasting Attributtet er ennå ikke implementert i Safari og (som du forventer) Internet Explorer. Å si at, i henhold til moderne IE-status, er den for øyeblikket øverst på utviklingslisten og mottar mange stemmer. 

I mellomtiden kan vi legge til en anstendig tilbakekalling, for eksempel å gi ekstra instruksjoner under nedlastingskoblingen for ikke-støttende nettlesere. For å gjøre det, må vi laste ned Modernizr med nedlasting funksjonstest inkludert.

Da kan vi legge til følgende skript.

hvis (! Modernizr.adownload) var $ link = $ ('a'); $ link.each (function () var $ download = $ (dette) .attr ('download'); hvis (typeof $ nedlasting! == typeofdefinert && $ download! == false) var $ el = $ '
') .addClass (' nedlasting-instruksjon '). tekst (' Høyreklikk og velg "Last ned koblet fil" '); $ El.insertAfter ($ (dette)); );  

Skriptet vil teste om nettleseren støtter nedlasting Egenskap; Hvis ikke, vil det legge til en ny 

 med klassen for styling, så vel som instruksjonsteksten, og sett den inn under en lenke som er innredet med nedlasting Egenskap.

Tekstinstruksjonen vises i Safari.

Wrapping Up

De nedlasting Attributt gjør håndtering nedlastingskoblinger veldig praktisk for alle som ikke har tilgang til server-side konfigurasjon. Jeg gleder meg til Internet Explorer og Safari som implementerer nedlasting attributt snart!

Webdesign