Lag en "gå tilbake"-knapp. Hvordan lage en tilbakeknapp på en Cada-nettside slik at alt går tilbake

Noen ganger på nettsider er det behov for å midlertidig gå til en annen (la oss kalle det hjelpeside), og deretter gå tilbake og fortsette å jobbe med den. Dette kan for eksempel være en hjelpeside, registreringsside.

I dette tilfellet kan selvsagt returadressen være svært forskjellig. Hvordan implementere en slik omvendt overgang på et nettsted? Ren html/CSS er ikke nok her, du må bruke javascript.

Det enkleste er for eksempel å bruke denne linjen i skriptet på hjelpesiden:

Historiemetoden husker historien til navigering på en side, og faktisk ligner bruken den på å bruke nettleserens Forover- og Tilbake-knapper, bare litt mer funksjonell. Dette er den enkleste og mest praktiske måten, men bare under én betingelse: hvis den nye (ekstra) siden ikke åpnes i et nytt vindu. Ellers vil hjelpesiden åpnes for første gang (mer presist, det vil være den første økten for den, det har ikke vært noen overganger på den ennå). Og dette betyr at det faktisk ikke er noe sted å gå tilbake. Derfor kan denne metoden ikke kalles universell. Det vil ikke fungere hvis brukeren blir tvunget til å åpne siden i en ny fane eller nettleseren gjør det for ham - i samsvar med innstillingene. I dette tilfellet vil ikke lenkeattributtet target="_self" hjelpe: det vil være umulig å gå tilbake fra en åpen hjelpeside (med mindre du selvfølgelig skriver inn URL-en til kildesiden manuelt i nettleserens adresselinje).

En mer universell måte

For å implementere det trenger du skript på både kildesiden og tilleggssiden. Ideen kan variere. En av dem er basert på at adressen (URL) til kildesiden er lagret i nettleserens adresselinje som en GET-forespørsel. Derved. Hjelpesiden, når den mottar en slik forespørsel, vet om kilden. Ut fra dette blir det mulig å bytte tilbake, d.v.s. til siden som overgangen ble gjort fra.

Skjematisk kan dette representeres som følger:

Skript på originalsiden

På siden HVILKEN overgangen skal gjøres, er det følgende script, som er en funksjon - en museklikkbehandler (onclick):

funksjon save_back(url) (

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

For at funksjonen i skriptet skal fungere, må du installere behandleren på et element på en av måtene, for eksempel slik:

Klikk for å gå til støttesiden

Merk at href-attributtet til denne koblingen har en tilsvarende adresse, som er spesifisert i onclick-hendelsesbehandlingsfunksjonen. Dette gjøres for at søkeroboter skal forstå hvilken side lenken vil gå til når du klikker på lenken. Hvis dette ikke er nødvendig, bør du lage et tomt href-attributt, som

Prinsippet for dette skriptet er at når save_back(url)-funksjonen kalles opp, åpnes en (hjelpe)side med url-adressen. For å gjøre dette, bestemmes protokollen til siden (for eksempel http eller https), så vel som resten av URL-en til den opprinnelige nettsiden, inkludert muligens eventuelle GET-forespørselsdata (dette er det som står i URL-en etter "?"-tegn). De mottatte dataene legges til URL-en til siden som åpnes - og en overgang til den skjer.

Skript på hjelpesiden

Den bør ha et skript som dette:

var docum_protocol = document.location.protocol;
var number_questions = docum_location.length-1;

var spørsmål = "";
if(antall_spørsmål > 1)(
spørsmål = "?";
}
document.location = docum_protocol+"//"+ docum_href + spørsmål + get;
}

Dette skriptet vil også bli lansert når musen klikker på ethvert element som den tilsvarende behandleren er installert på:

Komme tilbake

Denne linjen avbryter standardhandlingen når musen klikker på en lenke. Faktum er at lenken som standard følges. I dette tilfellet vil overgangen skje nøyaktig til adressen spesifisert i href-attributtet. Denne adressen (spesielt på en hjelpeside) inneholder kanskje ikke returadressen til siden som overgangen ble gjort fra (hvis overgangen til hjelpesiden ikke er mulig fra en bestemt side, men fra flere kildesider).

Så, skriptet på hjelpesiden leser innholdet i adressefeltet og deler det deretter opp i en rekke "?"-elementer. Vær oppmerksom på at en URL kan inneholde to slike tegn. Den første vil vises, som allerede nevnt, på grunn av at adressen (minus protokollen) til kildesiden er lagt til adressen til hjelpesiden. Og den andre kan være til stede som et resultat av tilstedeværelsen av GET-forespørselsparametere når du laster inn kildesiden. Med andre ord kan det være ett eller to spørsmålstegn i adressefeltet på hjelpesiden. For å gå fra en sekundær side til den opprinnelige siden når du klikker på en lenke

Komme tilbake

Forespørselen leses fra adresselinjen og konverteres til samme form som den hadde på den opprinnelige siden, hvoretter siden lastes inn på denne adressen.

Notater

I tillegg skal det bemerkes at artikkelen faktisk ikke handler om å gå tilbake til den opprinnelige siden, men om å laste den på nytt. Dette er selvfølgelig bare en imitasjon av en retur. Spesielt kan det hende at dataene som er lagt inn på denne siden og dens innstillinger ikke lagres. I tillegg, i motsetning til RETURN, når siden laster, vil den bli åpnet helt fra begynnelsen av nettstedet (dvs. den øvre delen vil være plassert øverst på skjermen). Mens et "ekte" tilbakespor returnerer (opprinnelig) siden til den nøyaktige plasseringen hvorfra hoppet ble gjort. Derfor, la oss prøve å kombinere begge metodene.

Kombinert metode

Så la oss sette oppgaven:

hvis hjelpesiden åpnes i samme fane (vindu), så la history.back()-metoden være tilgjengelig;

men hvis hjelpesiden åpnes i et nytt vindu, bør metoden diskutert ovenfor fungere (fordi i dette tilfellet vil ikke history.back() fungere).

Skriptet på hjelpesiden vil endre seg litt (linjen nevnt ovenfor vil bli lagt til):

funksjon return_to_initial_page() (
historie.tilbake();
var docum_location = document.location.toString().split("?");
var docum_href = docum_location;
var docum_protocol = document.location.protocol;
var number_questions = docum_location.length - 1;
var get = docum_location;
var spørsmål = "";
if (antall_spørsmål > 1) (
spørsmål = "?";
}
document.location = docum_protocol + "//" + docum_href + spørsmål + get;
}

Først prøver vi å gå tilbake. Hvis det fungerer, vil ikke resten av skriptet fungere, og du vil gå tilbake til den opprinnelige siden på samme sted der overgangen ble gjort. Hvis ikke, trekker vi, som før, ut adressen til kildesiden fra parametrene til GET-forespørselen og går til den.

Konklusjon

Selvfølgelig viser denne artikkelen bare ett av teknologialternativene for å "gå tilbake" TILBAKE - til den opprinnelige siden. For dette formålet, i tillegg til GET-forespørselen, kan andre teknologier brukes, for eksempel lokal lagring localStorage. I tillegg, for å fullstendig simulere en retur TILBAKE, ville det være fint å overføre rullemengden til den opprinnelige siden via en GET-forespørsel - slik at du senere, selv når du åpner tilleggssiden i et nytt vindu, kan gå tilbake til samme sted på den opprinnelige siden der overgangen tidligere ble gjort.

I denne artikkelen vil vi se på hvordan du kan lage en "Gå tilbake"-knapp hvor som helst du trenger. Jeg tror fra navnet på knappen er det allerede klart hva som vil skje når du klikker på den. En slik knapp kan settes inn både i en kategori og i selve materialet. Alt gjøres ganske enkelt.

Det er flere alternativer for hvordan du kan legge til en knapp, men jeg personlig brukte bare én måte. Nemlig det tredje alternativet av de tre jeg foreslo. Litt lenger skal jeg fortelle deg hvorfor.

Hvilke alternativer har vi:

Rediger Jooml-malfiler.

Bare lim inn knappekoden på riktig sted.

Lag en modul "HTML-kode", sett inn knappekoden der, og vis deretter denne modulen på riktig sted.

Fordelen med det tredje alternativet er at dersom du skal redigere teksten på en knapp eller endre/legge til en stilklasse, trenger du kun å fikse selve modulen, og ikke fikse knappen alle stedene den befinner seg.

Så på et av nettstedene mine brukte jeg det tredje alternativet:

Modulen "HTML code" ble opprettet og knappekoden ble satt inn der ved hjelp av utvidelsen "Sourcerer", som gjør det mulig å legge til hvilken som helst kode i materialet.

Min fungerende knappkode:

kom tilbake

Teksten er litt dekorert med en pil ved hjelp av komponenter fra Bootstrap 3, og selve knappen er stylet via CSS.

God ettermiddag, jeg har et spørsmål om hvordan du flytter knappen tilbake og plasserer den ved siden av neste knapp når du bestiller. Nå ser det slik ut for meg. https://yadi.sk/i/_ZNvGrvEhqSk3 Hvis du flytter den ned, slutter den å virke. Koden er ansvarlig for...

Det finnes en løsning

Hei, kan noen fortelle meg hvordan jeg lager en tilbakeknapp, for eksempel i handlekurven, slik at en person kan gå tilbake til forrige side?

Sett inn en knapp hvor du vil i malen, for eksempel denne

+1

Når jeg trykker på tilbakeknappen på nettleseren, ser det ut til at alle stilene forsvinner til jeg oppdaterer siden. Standardtemaet skal vises som i skjermbildet nedenfor) Fortell meg hva problemet er

Hei, jeg laget en "Gå tilbake"-knapp i handlekurven, ikke engang en knapp, men bare en lenke med koden Gå tilbake Nå når du går tilbake til handlekurven...

Det finnes en løsning

God ettermiddag! Jeg støtt på følgende problem: når du legger til en vare i handlekurven din og klikker på «tilbake»-knappen i nettleseren, lagres ikke informasjon om varene i handlekurven (i tilleggsblokken) før du oppdaterer siden. De. gå til siden, gå...

Nettstedet du har angitt bruker en plugin for handlekurven. Som et alternativ med endringer kan du bruke å sende tillegg av varer ikke til?html=1, men til?html=1&items=1; dette vil svare med det fullstendige innholdet i vogn.

God ettermiddag. Ved hvert trinn i kassen vises en «Neste»-knapp. I «Suprime»-emnet fant jeg knappekoden: