HTML Tilbage Button

HTML Tilbage Button

En af de mest almindelige funktioner, som mange web-designere kan lide at tilføje til deres websider er en "gå til forrige" knappen eller linket, også kendt som en HTML tilbage-knap, der sender brugeren til den sidste webside, de besøgte.

Hvordan HTML Back Button Hjælper Navigation

Et af de vigtigste aspekter af enhver webside skaber problemfri og intuitiv navigation for dine besøgende. Når du har "interne" sider, der linkes til fra flere andre sider, kan det være lidt svært at gætte, hvor den besøgende kom fra. I det tilfælde, hvor besøgende ankom til side fra en søgemaskine eller anden link, er det umuligt at vide. Men ved hjælp af en HTML tilbage-knap, kan du give dine besøgende med bekvemmeligheden af ​​et link, der returnerer dem til den side, hvor de kom fra. Mens brugere normalt har mulighed for at bruge browserens "tilbage" knappen, hvilket ville gøre det samme, hvilket giver et link på din side tilføjer bekvemmelighed og intuitiveness til din hjemmeside.

Programmering af knappen Tilbage med HTML

Der er forskellige metoder til rådighed for at skabe en knap eller link, der vil sende dine besøgende til den forrige side de var på. Den mulighed, du vælger, afhænger af, hvordan du ønsker den skal stå, og om du ønsker at sørge for, at nogle brugere ikke kan have javascript aktiveret browsere.

Brug af Javascript

Ved hjælp af javascript metode er en af ​​de mest populære teknikker mange nyere webdesignere bruge, fordi det er så nemt. Men hvis du bruger denne metode, er det en god idé at inkludere en faktisk linkede side for browseren til at gå til, hvis browseren ikke kan køre javascript. I et sådant tilfælde, vil browseren ignorere javascript kode, men det vil vende tilbage til det link, du har defineret til href variabel. Når du vælger hvilken side at linke til, så prøv at gætte, hvor brugeren ville være kommet fra på dit websted, før ankommer til denne side. Hvis du ikke er sikker på, så kunne du altid sende dem til forsiden af ​​din hjemmeside.

Javascript: et tekstlink

Denne første javascript teknik giver brugeren et tekstlink, der vil sende dem tilbage en side.

<a href="yourpage.html" onclick="window.back()"> Tilbage til forrige side </a>

Du kan bruge "history.back ()" i stedet for "window.back ()" - de to funktioner fungerer på samme måde. En anden teknik ved hjælp af javascript er at sende brugeren tilbage et antal sider. De fleste web-programmører sende den besøgende tilbage "-1" sider, men du kunne sætte antallet af sider, hvad du vil.

<a href="yourpage.html" onclick="history.go(-1);"> Tilbage til forrige side </a>

Javascript: En formular Button

En anden metode anvender javascript er at skabe et gråt "formular knappen", der, når der klikkes, vil opføre sig på samme måde, som det er beskrevet i sidste afsnit link metode. Der er ingen reel fordel i at bruge denne teknik over teksten link tilgang. Den afgørende faktor er virkelig æstetik - hvilken løsning vil du give dine besøgende til navigation, og hvordan du vil have det til at se ud?

<FORM> <INPUT TYPE = "knappen" value = "Forrige side" onClick = "history.go (-1);"> </ FORM>

Brug af Server Side Scripts

Teknikken mest professionelle webdesignere bruger er at gøre brug af Server Side Includes (SSIS), hvor de kan skrive CGI-kode, der bliver behandlet på webserveren selv, fjerner behovet for klientbrowseren at køre nogen JavaScript-kode. Hvordan denne kode er skrevet afhænger af, hvordan webserveren er konfigureret og hvad scripting sprog, du bruger. I alle tilfælde server side script gør brug af en variabel kaldet "HTTP_REFERER."

Prøve scriptet ved hjælp CGI:

<A HREF="<! - #echo var="HTTP_REFERER" -> "> Gå til forrige side </A>

Den HTTP_REFERER variabel er den webadresse, der er nævnt den besøgende til den aktuelle webside. Hvis dit scripting sprog valg er PHP, så at få adgang til referer variable og link til den forrige side, du vil oprette et tekstlink ved hjælp af følgende kode.

<? Php echo "<a href =" "$ _SERVER. [" Referer "] '> Gå til forrige side </a>.« « ?>

Eller en form knap ved hjælp af denne kode:

<? Php echo "<form action =" "$ _SERVER. [" Referer "]." "Method =" get "> <input type =" submit "value =" Forrige side "> </ form,> '; ?>

Afsluttende ord

Tilføjelse af funktionen til at "gå tilbage" til tidligere sider virker som et meget enkelt koncept, men når du forsøger at indarbejde den enkleste og mest intuitive navigation på din hjemmeside, disse metoder til at tilføje en sådan funktion blevet en uundværlig del af enhver web programmør værktøjskasse.