Kako napraviti gumb za povratak na web stranicu. Napravite gumb "povratak" Univerzalniji način

U ovom ćemo članku pogledati kako možete stvoriti gumb "Idi natrag" na bilo kojem mjestu koje vam je potrebno. Mislim da je iz naziva gumba već jasno što će se dogoditi kada kliknete na njega. Takav se gumb može umetnuti iu kategoriju iu sam materijal. Sve se radi vrlo jednostavno.

Postoji nekoliko opcija kako možete dodati gumb, ali ja sam osobno koristio samo jedan način. Naime, treća opcija od tri koje sam predložio. Malo dalje ću vam reći zašto.

Koje mogućnosti imamo:

Prednost treće opcije je da ako trebate urediti tekst na gumbu ili promijeniti/dodati klasu stila, trebat ćete popraviti samo sam modul, a ne popraviti gumb na svim mjestima gdje se nalazi.

Dakle, na jednoj od svojih stranica koristio sam treću opciju:

Izrađen je modul “HTML code” i ondje je umetnut kod gumba pomoću proširenja “Sourcerer”, što omogućuje dodavanje bilo kojeg koda u materijal.

Moj radni kod gumba:

vrati se

Tekst je blago ukrašen strelicom pomoću komponenti iz Bootstrapa 3, a sam gumb stiliziran je putem CSS-a.

Ponekad je na web stranicama potrebno privremeno otići na neku drugu (nazovimo je pomoćnom) stranicu, a zatim se vratiti i nastaviti raditi s njom. Na primjer, ovo može biti stranica za pomoć, stranica za registraciju.

U ovom slučaju, očito, povratna adresa može biti vrlo različita. Kako implementirati takav obrnuti prijelaz na web stranici? Čisti html/CSS ovdje nije dovoljan; morat ćete koristiti javascript.

Najjednostavnije je, na primjer, koristiti ovu liniju u skripti na pomoćnoj stranici:

Metoda povijesti pamti povijest navigacije na stranici i zapravo je njezina upotreba slična korištenju gumba Naprijed i Natrag preglednika, samo malo funkcionalnija. Ovo je najjednostavniji i prikladan način, ali samo pod jednim uvjetom: ako se nova (pomoćna) stranica ne otvori u novom prozoru. Inače, prvi put će se otvoriti pomoćna stranica (točnije, bit će joj to prva sesija, na njoj još nije bilo prijelaza). A to znači da se, zapravo, više nema kamo vratiti. Zato ovu metodu ne može se nazvati univerzalnim. Neće raditi ako je korisnik prisiljen otvoriti stranicu u novoj kartici ili preglednik to učini umjesto njega - u skladu s postavkama. U ovom slučaju atribut veze target=”_self” neće pomoći: neće biti moguće vratiti se s otvorene pomoćne stranice (osim ako, naravno, URL izvorne stranice ne unesete ručno u adresnu traku preglednika).

Da biste ga implementirali, trebat će vam skripte i na izvornoj i na pomoćnoj stranici. Ideja može varirati. Jedan od njih temelji se na činjenici da je adresa (URL) izvorne stranice pohranjena u adresnoj traci preglednika kao GET zahtjev. Time. Pomoćna stranica, kada primi takav zahtjev, zna za njegov izvor. Na temelju toga postaje moguće vratiti se natrag, tj. na stranicu s koje je prijelaz napravljen.

Shematski se to može prikazati na sljedeći način:

Na stranici KOJI treba napraviti prijelaz nalazi se sljedeća skripta koja je funkcija - rukovatelj klikom miša (onclick):

funkcija save_back(url) (

var docum_href = document.location.toString().substring(docum_protocol.length+2);
if(docum_href.substring(0,1) == "/") (
dokument_href = dokument_href.substring(1);
}
var href = window.location.protocol+"//"+document.location.hostname + url + "?"+docum_href;
window.open(href);
}

Da bi funkcija u skripti radila potrebno je instalirati njen rukovatelj na neki element na jedan od načina, npr. ovako:

Kliknite za odlazak na stranicu podrške

Imajte na umu da atribut href ove veze ima odgovarajuću adresu, koja je navedena u funkciji rukovatelja događajem onclick. To je učinjeno kako bi roboti za pretraživanje razumjeli na koju stranicu će otići kada kliknete na vezu. Ako ovo nije potrebno, trebali biste napraviti prazan href atribut, kao

Princip ove skripte je da kada se pozove funkcija save_back(url), otvara se (pomoćna) stranica s url adresom. Da biste to učinili, utvrđuje se protokol stranice (na primjer, http ili https), kao i ostatak URL-a izvorne web-stranice, uključujući moguće podatke GET zahtjeva (to je ono što se nalazi u URL-u nakon znak “?”). Primljeni podaci dodaju se URL-u stranice koja se otvara - i dolazi do prijelaza na nju.

Trebao bi imati ovakvu skriptu:

var docum_protocol = document.location.protocol;
var broj_pitanja = lokacija_dokumenta.duljina-1;

var pitanje = "";
if(broj_pitanja > 1)(
pitanje = "?";
}
document.location = dokument_protokol+"//"+ dokument_href + pitanje + dobiti;
}

Ova skripta također će se pokrenuti kada mišem kliknete na bilo koji element na kojem je instaliran odgovarajući rukovatelj:

Povratak

Ovaj redak poništava zadanu radnju kada se mišem klikne poveznica. Činjenica je da se veza prema zadanim postavkama slijedi. U ovom slučaju, prijelaz će se dogoditi točno na adresu navedenu u atributu href. Ova adresa (osobito na pomoćnoj stranici) ne smije sadržavati povratnu adresu stranice s koje je prijelaz napravljen (ako je prijelaz na pomoćnu stranicu moguć ne s jedne određene stranice, već s nekoliko izvornih stranica).

Dakle, skripta na pomoćnoj stranici čita sadržaj adresne trake i zatim ga dijeli u niz elemenata "?". Imajte na umu da URL može sadržavati dva takva znaka. Prvi će se pojaviti, kao što je već spomenuto, zbog činjenice da je adresa (bez protokola) izvorne stranice dodana adresi pomoćne stranice. A drugi bi mogao biti prisutan kao rezultat prisutnosti parametara GET zahtjeva prilikom učitavanja izvorne stranice. Drugim riječima, u adresnoj traci stranice pomoći mogu postojati jedan ili dva upitnika. Za prelazak sa sekundarne stranice na izvornu stranicu kada kliknete na vezu

Povratak

Zahtjev se čita iz adresne trake i pretvara u isti oblik koji je imao na originalnoj stranici, nakon čega se stranica učitava na tu adresu.

Osim toga, treba napomenuti da se u članku, zapravo, ne radi o vraćanju na izvornu stranicu, već o njezinom ponovnom učitavanju. Ovo je, naravno, samo imitacija povratka. Konkretno, podaci uneseni na ovoj stranici i njezine postavke možda neće biti spremljeni. Osim toga, za razliku od POVRATAKA, kada se stranica učita, ona će se otvoriti od samog početka stranice (tj. njen gornji dio će se nalaziti na vrhu ekrana). Dok "pravi" povratak vraća (izvornu) stranicu na točnu lokaciju s koje je skok napravljen. Stoga, pokušajmo kombinirati obje metode.

Dakle, postavimo zadatak:

ako se pomoćna stranica otvori u istoj kartici (prozoru), onda neka bude dostupna metoda history.back();

ali ako se pomoćna stranica otvori u novom prozoru, tada bi gore razmotrena metoda trebala raditi (jer u ovom slučaju history.back() neće raditi).

Skripta na pomoćnoj stranici malo će se promijeniti (dodat će se gore spomenuta linija):

funkcija return_to_initial_page() (
povijest.natrag();
var docum_location = document.location.toString().split("?");
var dokument_href = lokacija_dokuma;
var docum_protocol = document.location.protocol;
var broj_pitanja = lokacija_dokumenta.duljina - 1;
var get = lokacija_dokumenta;
var pitanje = "";
if (broj_pitanja > 1) (
pitanje = "?";
}
document.location = dokument_protokol + "//" + dokument_href + pitanje + dobiti;
}

Prvo se pokušavamo vratiti. Ako radi, ostatak skripte neće raditi i vratit ćete se na originalnu stranicu na isto mjesto odakle je prijelaz napravljen. Ako ne, tada, kao i prije, izdvajamo adresu izvorne stranice iz parametara GET zahtjeva i idemo na nju.

Naravno, ovaj članak prikazuje samo jednu od tehnoloških opcija za “povratak” NATRAG - na originalnu stranicu. U tu svrhu, osim GET zahtjeva, mogu se koristiti i druge tehnologije, na primjer lokalna pohrana localStorage. Osim toga, za potpunu simulaciju povratka NATRAG, bilo bi lijepo prenijeti količinu pomicanja originalne stranice putem GET zahtjeva - tako da se kasnije, čak i kada otvorite pomoćnu stranicu u novom prozoru, možete vratiti na isto mjesto na izvornoj stranici s koje je prethodno izvršen prijelaz.

Dobar dan, imam pitanje o tome kako pomaknuti gumb natrag i staviti ga pored sljedećeg gumba kada naručujete. Sada izgleda ovako za mene dolje, prestaje raditi.

Postoji rješenje

Pozdrav, može li mi netko reći kako napraviti gumb za povratak npr. u košarici da se čovjek vrati na prethodnu stranicu?

Umetnite gumb gdje god želite u predložak, na primjer, ovo

+1

Kada pritisnem gumb za povratak u pregledniku, čini se da svi stilovi nestaju dok ne osvježim stranicu, trebala bi se prikazati kao na snimci zaslona u nastavku) Recite mi u čemu je problem

Pozdrav, napravio sam gumb "Vrati se nazad" u košarici, čak nije ni gumb, već samo link sa kodom Vrati se Sada kada se vratite u košaricu...

Postoji rješenje

Dobar dan! Naišao sam na sljedeći problem: kada dodate artikl u košaricu i kliknete na gumb "natrag" u pregledniku, informacije o artiklima u košarici (u dodatnom bloku) se ne spremaju dok ne osvježite stranicu. Oni. idi na stranicu, idi...

Web mjesto koje ste naveli koristi dodatak za košaricu, možete koristiti dodavanje robe ne na?html=1, već na?html=1&items=1; kolica.

Dobar dan. Na svakom koraku tijekom naplate prikazan je gumb "Dalje" U temi "Suprime" pronašao sam kod gumba: