Takaisin-painike lähdekoodissa. Luo "palaa" -painike

Tässä artikkelissa tarkastellaan, kuinka voit luoda "Palaa" -painikkeen mihin tahansa tarvitsemaasi paikkaan. Luulen, että painikkeen nimestä on jo selvää, mitä tapahtuu, kun napsautat sitä. Tällainen painike voidaan lisätä sekä luokkaan että itse materiaaliin. Kaikki tehdään melko yksinkertaisesti.

Painikkeen lisäämiseen on useita vaihtoehtoja, mutta itse käytin vain yhtä tapaa. Nimittäin kolmas vaihtoehto kolmesta ehdottamastani. Kerron vähän tarkemmin miksi.

Mitä vaihtoehtoja meillä on:

Muokkaa Jooml-mallitiedostoja.

Liitä vain painikkeen koodi oikeaan paikkaan.

Luo moduuli "HTML-koodi", lisää painikkeen koodi siihen ja näytä sitten tämä moduuli oikeaan paikkaan.

Kolmannen vaihtoehdon etuna on, että jos haluat muokata painikkeen tekstiä tai muuttaa/lisätä tyyliluokkaa, sinun tarvitsee vain korjata itse moduuli, etkä korjata painiketta kaikissa paikoissa, joissa se sijaitsee.

Joten eräällä sivustollani käytin kolmatta vaihtoehtoa:

”HTML-koodi”-moduuli luotiin ja siihen lisättiin painikekoodi ”Sourcerer”-laajennuksella, joka mahdollistaa minkä tahansa koodin lisäämisen materiaaliin.

Työpainikkeeni koodi:

tule takaisin

Teksti on hieman koristeltu nuolella Bootstrap 3:n komponenteilla ja itse painike on tyylitelty CSS:n kautta.

Tässä opetusvideossa tarkastellaan kolmea vaihtoehtoa, joilla voit tehdä TAKAISIN-painikkeen siirtymään sivustolla edellisille sivuille käänteisessä järjestyksessä. TAKAISIN-painike on tarpeen myös silloin, kun linkit useilta sivuston sivuilta (A1, A2...An) johtavat samalle sivulle (B), ja tältä sivulta (B) on palattava edelliselle sivulle (An) sivustosta, josta pääsit sivulle (B).

Katso uusi opetusvideo:

Koodi "palaa"-painikkeelle sijoittamista varten sivustolle:

< a href = "#" onclick = > < img src = "assets/back2.png" alt = "Takaisin" / > < / a >

Takaisin nappi. Mitä varten se on?

Tässä opetusvideossa teemme painikkeen, jolla palataan sivuston edellisille sivuille Adobe ohjelma Muusa. Tämä painike palaa samaa polkua pitkin, jota seurasimme sivustolla.

Takaisin nappi. Oppituntiprojekti.

Tämän oppitunnin tekemiseksi valmistelin pienen projektin, tai pikemminkin sitä ei voi kutsua pieneksi, tässä se koostuu ylätason sivuista, ensimmäisen tason sivuista ja myös sivulle 2 on useita muita lapsia. sivuja. Ja vaihtelun vuoksi loin kaksi mallia. Käytin ensimmäistä mallia kolmelle ensimmäiselle sivulle. Ja sovelsin toista mallia kaikkiin muihin.

Aloitetaan. Luomme Takaisin-painikkeen "Malliin C", jotta se näkyy välittömästi niillä sivuilla, joilla tätä mallia käytetään. Menen muokkaamaan tätä mallia, ja tähän asetamme takaisin-painikkeen.

Takaisin nappi. 3 tapaa.

Voimme lisätä "Takaisin"-painikkeen kolmella tavalla. Minulla on erityinen tiedosto, jonka olen jo valmistellut muistikirjassa. Ja on kolme tapaa, kolme koodia, joilla voimme lisätä tällaisen painikkeen sivustolle.

Takaisin nappi. Menetelmä nro 1 - yksinkertainen teksti.

Ensimmäinen vaihtoehto on vain teksti. Painike tulee olemaan tekstin muodossa. Kopioin tämän koodin:

< input type = "button" onclick = "history.back();" value = "Takaisin" / >

Ja liitän sen malliin. Se näyttää tältä. Meillä on vain tekstiä ja se on korostettu valkoisella. Laitan sen tänne. Ymmärtääksemme, miten tämä kaikki toimii, painamme ctrl+alt+E-näppäimiä nähdäksesi koko sivuston kaikilla sen sivuilla selaimessa. Tältä sivuston pääsivu näyttää. Voimme surffata valikossa, valita sivuja. Tässä meillä on pudotusvalikot. Ja esimerkiksi pääsivulta menimme heti sivulle "sivu-3". Ja tässä on takaisin-painike.

Tämä painike on aktiivinen, mutta kun siirrät hiiren sen päälle, kättä, jossa on sormi, ei tule näkyviin. Voimme turvallisesti napsauttaa tätä painiketta, ja meidät ohjataan takaisin pääsivulle. Samalla tavalla voimme napsauttaa sivua "sivu-3", sitten mennä sivulle "sivu-4" ja napsauttaa "Takaisin" -painiketta, se vie meidät sivulle "sivu-3", ja jos napsautamme "Takaisin" -painikkeella uudelleen ", sitten se vie meidät pääsivulle. Takaisin-painike toimii näin.

Mutta tätä painiketta on vaikea kutsua painikkeeksi, koska se on vain sellainen merkintä, joka on korostettu valkoisella. Jos haluamme muokata sitä Musessa, voimme muuttaa vain tekstin kokoa, esimerkiksi laitan tähän "36", jotta näet sen paremmin. Mielestäni emme voi muuttaa tekstin väriä. Nyt yritän laittaa punaista. Valitsin punaisen, mutta tämä ei vaikuttanut kirjaimiin millään tavalla, joten emme voi muuttaa väriä. Voimme muuttaa kokoa. Yritetään tehdä siitä lihavoitu ja keskittää se. Emme voi muuta kuin muokata näin. Jos haluamme täyttää tämän lohkon esimerkiksi tehdä siitä oranssin, tekstimme korostetaan silti valkoisella, eikä se periaatteessa näytä kovin hyvältä.

Takaisin nappi. Menetelmä nro 2 – Linkkiteksti.

< a href = "#" onclick = "history.back();return false;" >Takaisin< / a >

Nyt kopioimme sen. Painan ctrl+C ja siirryn ohjelmaan ja painan ctrl+V liittääksesi sen sivustolle. Näyttää tältä linkistä. Linkkimme on sininen. Nyt hän ei ole kovin näkyvä. Tehdään myös 36. fontti suurentaaksesi sitä ja nähdäksesi sen tarkemmin. Tässä meillä on vain sininen linkki. Jos painamme nyt ctrl+alt+E, näemme, että katsottuna se näyttää tavalliselta siniseltä linkiltä. Käydään se läpi vielä pari kertaa nähdäksesi, klikkaa kerran, kahdesti, palaa takaisin. Tämä linkki näyttää samalta kuin tavallinen linkki.

Voimme soveltaa siihen linkkityylejä Adobe Musessa. Etsi linkkityylit Hyperlinkit-osiosta, valitse Muokkaa linkkien tyylejä. Minulla on jo valmis versio. Nyt minulla on jo valmis versio. Voit nähdä, että siihen on sovellettu tyyliä. Normaalitilassa ja hiiren osoitinta liikutettaessa väri on sininen ja aktiivisessa tilassa punainen. Näit sen katsoessasi. Toinen luomani tyyli oli yksinkertaisesti kaikki mustat tilat. Voimme soveltaa tätä tyyliä tähän painikkeeseen. Valitsen esimerkiksi tämän mukautetun tyylin ja käytän sitä tässä painikkeessa. Ja näet, että tekstistämme on tullut musta.

Täällä voimme myös tehdä täytön, esimerkiksi teen sen samalla oranssilla värillä. Täällä voit jo muokata tekstiä. Laitetaan se keskelle ja lihavoitu. Ja periaatteessa tämä vaihtoehto muistuttaa jo enemmän painiketta. Sellaista valkoista korostusta ei enää ole, ja periaatteessa tämä vaihtoehto on jo varsin sopiva. Selattaessa (ctrl+alt+E) siirrytään sivulle "sivu-3", sivulle "sivu-4" ja napsauta uudelleen. Tämä painike toimii täsmälleen samalla tavalla kuin ensimmäinen, mutta siinä on enemmän vaihtoehtoja suunnittelun muokkaamiseen.

Takaisin nappi. Menetelmä nro 3 – painike – kuva.

Ja kolmas vaihtoehto painikkeen sijoittamiselle on, että painike on kuva. Kopioin tämän koodin:

< a href = "#" onclick = "history.back();return false;" > < img src = "img.png" alt = "Kuva" / > < / a >

Siirryn Museen ja napsautan "Lisää". Ja tämä kolmas vaihtoehto meillä on kuva. Jotta meillä olisi täällä jonkinlainen kuva, meidän on ladattava kuvatiedosto Internetistä tai luotava se itse. Lisäämme kuvan ohjelman "Tiedosto"-toiminnon kautta, valitse "Lisää tiedostoja siirtoa varten". Olen jo ladannut pari kuvaa Internetistä. Voimme valita yhden. Valitse tämä paluupainikkeella. Jos nyt katsomme "Resurssit" -osiota, olemme lisänneet painikkeen "back2.png" - "Lähetä". Meillä on tämä tiedosto siirtoa varten.< a href = "#" onclick = "history.back();return false;" > < img src = "assets/back2.png" alt = "Takaisin" / > < / a >

Siinä kaikki, napsauta "OK". Emme näe muutoksia itse Musessa. Näemme kaikki muutokset vain, kun tarkastelemme sivustoa selaimessa. Painamme ctrl+alt+E uudelleen nähdäksesi sivuston selaimessa ja yritetään selata sivujamme.

Takaisin nappi. Katso tulos.

Mennään sivulle esimerkiksi "sivu 2-1", nyt sivulle "sivu-2", nyt sivulle "sivu 3", sitten sivulle "sivu-4". Ja nyt, jos painamme takaisin-painiketta, palaamme peräkkäin päinvastaisessa järjestyksessä kotisivu sivusto. Napsauta "Takaisin", siirry sivulle "sivu-3", sivulle "sivu-2". Ja tässä meillä ei ole enää painiketta. Jos sijoittaisimme sen malliin, jota käytettiin sivulle "sivu-2", meillä olisi myös "Takaisin"-painike. Koska meillä ei ole sellaista, meidän on navigoitava pääsivulle vain napsauttamalla valikon "Home"-painiketta. Siirrytään esimerkiksi sivulle “sivu 2-2-2”, sitten sivulle “sivu 2-2-1”, sitten sivuille “sivu-3” ja “sivu-4”. Ja nyt päinvastaisessa järjestyksessä: sivu "sivu-3", sivu "sivu 2-2-1", sivu "sivu 2-2-2" ja pääsivulle.

Sinun ei tietenkään tarvitse sijoittaa tätä painiketta verkkosivustollesi, vaan käytä tavallisia nuolia selaimessasi. Mutta jos haluat tällaisen painikkeen verkkosivullesi, voit tehdä sen näillä tavoilla... Ja linkki artikkeliin on tämän videon alla. Siinä kaikki. Dmitri Shapovalov oli kanssasi. Tykkää tästä videosta, tilaa kanava, kirjoita kommentteja alle, niin sanon sinulle hyvästit seuraaviin videotunteihin asti.

Joskus web-sivuilla on tarvetta siirtyä väliaikaisesti jollekin toiselle (kutsutaanko sitä apusivulle) ja palata sitten takaisin ja jatkaa työskentelyä sen parissa. Tämä voi olla esimerkiksi ohjesivu tai rekisteröintisivu.

Tässä tapauksessa palautusosoite voi luonnollisesti olla hyvin erilainen. Kuinka toteuttaa tällainen käänteinen siirtyminen verkkosivustolla? Pelkkä html/CSS ei riitä tähän, sinun on käytettävä javascriptiä.

Yksinkertaisin asia on esimerkiksi käyttää tätä riviä skriptissä apusivulla:

Historiamenetelmä muistaa sivulla navigoinnin historian ja itse asiassa sen käyttö on samanlaista kuin selaimen Eteenpäin- ja Takaisin-painikkeiden käyttö, vain hieman toimivampi. Tämä on yksinkertaisin ja kätevin tapa, mutta vain yhdellä ehdolla: jos uutta (apu)sivua ei avata uudessa ikkunassa. Muuten apusivu avautuu ensimmäistä kertaa (tarkemmin sanottuna se on sen ensimmäinen istunto, sillä ei ole vielä ollut siirtymiä). Ja tämä tarkoittaa, että itse asiassa ei ole minnekään palata. Siksi tätä menetelmää ei voida kutsua universaaliksi. Se ei toimi, jos käyttäjä pakotetaan avaamaan sivu uudelle välilehdelle tai selain tekee sen hänen puolestaan ​​- asetusten mukaisesti. Tässä tapauksessa linkkiattribuutti target=”_self” ei auta: on mahdotonta palata avoimelta apusivulta (ellet tietenkään kirjoita lähdesivun URL-osoitetta manuaalisesti selaimen osoiteriville).

Universaalimpi tapa

Sen toteuttamiseksi tarvitset skriptejä sekä lähde- että apusivuilla. Idea voi vaihdella. Yksi niistä perustuu siihen, että lähdesivun osoite (URL) tallennetaan selaimen osoiteriville GET-pyynnönä. Siten. Apusivu, kun se vastaanottaa tällaisen pyynnön, tietää sen lähteen. Tämän perusteella on mahdollista vaihtaa takaisin, ts. sivulle, jolta siirto tehtiin.

Kaavamaisesti tämä voidaan esittää seuraavasti:

Käsikirjoitus päällä alkuperäinen sivu

Sivulla MIKÄ siirto tulee tehdä, on seuraava komentosarja, joka on funktio - hiiren napsautuskäsittelijä (onclick):

funktio save_back(url) (

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

Jotta skriptin funktio toimisi, sinun on asennettava sen käsittelijä jollekin elementille jollakin seuraavista tavoista, esimerkiksi näin:

Napsauta siirtyäksesi tukisivulle

Huomaa, että tämän linkin href-attribuutilla on vastaava osoite, joka määritetään onclick-tapahtumankäsittelytoiminnossa. Tämä tehdään, jotta hakurobotit ymmärtävät, mille sivulle linkki siirtyy, kun napsautat linkkiä. Jos tätä ei tarvita, sinun tulee tehdä tyhjä href-attribuutti, kuten

Tämän skriptin periaate on, että kun save_back(url)-funktiota kutsutaan, avautuu (apu)sivu url-osoitteella. Tätä varten määritetään sivun protokolla (esimerkiksi http tai https) sekä muu alkuperäisen verkkosivun URL-osoite, mukaan lukien mahdollisesti GET-pyyntötiedot (tämä on URL-osoitteessa "?" merkki). Vastaanotetut tiedot lisätään avattavan sivun URL-osoitteeseen - ja siirtyminen siihen tapahtuu.

Käsikirjoitus ohjesivulla

Siinä pitäisi olla tällainen skripti:

var docum_protocol = document.location.protocol;
var numero_kysymykset = asiakirjan_sijainti.pituus-1;

var kysymys = "";
if(luku_kysymykset > 1)(
kysymys = "?";
}
document.location = docum_protocol+"//"+ docum_href + kysymys + hanki;
}

Tämä komentosarja käynnistyy myös, kun hiiri napsauttaa mitä tahansa elementtiä, johon vastaava käsittelijä on asennettu:

Palata

Tämä rivi peruuttaa oletustoiminnon, kun hiiri napsauttaa linkkiä. Tosiasia on, että oletusarvoisesti linkkiä seurataan. Tässä tapauksessa siirtyminen tapahtuu täsmälleen href-attribuutissa määritettyyn osoitteeseen. Tämä osoite (etenkin apusivulla) ei saa sisältää sen sivun palautusosoitetta, josta siirtyminen tehtiin (jos siirtyminen apusivulle ei ole mahdollista yhdeltä tietyltä sivulta, vaan usealta lähdesivulta).

Joten apusivulla oleva komentosarja lukee osoitepalkin sisällön ja jakaa sen sitten "?"-elementtien joukkoon. Huomaa, että URL-osoite voi sisältää kaksi tällaista merkkiä. Ensimmäinen tulee näkyviin, kuten jo mainittiin, johtuen siitä, että lähdesivun osoite (miinus protokolla) on lisätty apusivun osoitteeseen. Ja toinen voi olla läsnä GET-pyyntöparametrien läsnäolon seurauksena lähdesivua ladattaessa. Toisin sanoen ohjesivun osoitepalkissa voi olla yksi tai kaksi kysymysmerkkiä. Siirtyminen toissijaiselta sivulta alkuperäiselle sivulle, kun napsautat linkkiä

Palata

Pyyntö luetaan osoitepalkista ja muunnetaan samaan muotoon kuin se oli alkuperäisellä sivulla, minkä jälkeen sivu ladataan tähän osoitteeseen.

Huomautuksia

Lisäksi on huomattava, että artikkelissa ei itse asiassa ole kyse paluusta alkuperäiselle sivulle, vaan sen lataamisesta uudelleen. Tämä on tietysti vain jäljitelmä paluusta. Erityisesti tälle sivulle annettuja tietoja ja sen asetuksia ei välttämättä tallenneta. Lisäksi, toisin kuin RETURN, sivun latautuessa se avataan heti sivuston alusta (eli sen yläosa sijaitsee näytön yläosassa). Kun taas "todellinen" backtrack palauttaa (alkuperäisen) sivun tarkalleen sijaintiin, josta hyppy tehtiin. Siksi yritetään yhdistää molemmat menetelmät.

Yhdistetty menetelmä

Laitetaan siis tehtävä:

jos apusivu avautuu samassa välilehdessä (ikkunassa), anna historia.back()-metodi olla käytettävissä;

mutta jos apusivu avautuu uuteen ikkunaan, niin yllä mainitun menetelmän pitäisi toimia (koska tässä tapauksessa historia.back() ei toimi).

Apusivun skripti muuttuu hieman (yllä mainittu rivi lisätään):

funktio return_to_initial_page() (
historia.takaisin();
var docum_location = document.location.toString().split("?");
var docum_href = asiakirjan_sijainti;
var docum_protocol = document.location.protocol;
var numero_kysymykset = asiakirjan_sijainti.pituus - 1;
var get = asiakirjan_sijainti;
var kysymys = "";
jos (luku_kysymykset > 1) (
kysymys = "?";
}
document.location = docum_protocol + "//" + docum_href + kysymys + hanki;
}

Ensin yritämme palata takaisin. Jos se toimii, muu skripti ei toimi ja palaat alkuperäiselle sivulle samaan paikkaan, josta siirto tehtiin. Jos ei, niin, kuten ennenkin, poimimme lähdesivun osoitteen GET-pyynnön parametreista ja siirrymme siihen.

Johtopäätös

Tietenkin tämä artikkeli näyttää vain yhden tekniikan vaihtoehdoista "palaamiseksi" TAKAISIN - alkuperäiselle sivulle. Tätä tarkoitusta varten GET-pyynnön lisäksi voitaisiin käyttää muita teknologioita, esimerkiksi paikallista tallennustilaa localStorage. Lisäksi paluupalautuksen simuloimiseksi olisi mukavaa lähettää alkuperäisen sivun vieritysmäärä GET-pyynnön kautta - jotta myöhemmin, jopa avattaessa apusivu uudessa ikkunassa, voit palata samaan paikkaan alkuperäisellä sivulla, josta aiemmin siirryttiin.

Monet käytettävyystutkimukset osoittavat, että käyttäjät (sekä uudet että kokeneet) käyttävät usein selaimen "palaa"-painiketta. Valitettavasti käyttöliittymäsuunnittelijat ja markkinoijat harvoin ajattelevat, mitä vaikutuksia tällä voi olla käytettävyyteen, koska nykyaikaiset verkkosuunnittelumallit käyttävät sovelluksia, animaatioita, videoita ja paljon muuta. Usein näiden asettelujen tekninen rakenne ei vastaa "palaa takaisin" -toimintoon oikein, mikä rikkoo käyttäjän henkisen mallin ja huonontaa hänen kokemustaan.

Tämän seuraukset voivat olla kauheita: kokeilujen aikana sivuston riittämätön vastaus "takaisin"-painikkeen painamiseen johti siihen, että monet käyttäjät poistuivat väärinkäytöstä ja epämiellyttävistä arvosteluista. Useimmissa tapauksissa jopa kunnioitetut, harmaatukkaiset aiheet menettivät malttinsa kauheasti.

Tästä artikkelista opit:

• mitä käyttäjät odottavat "palaa"-painikkeelta;
• mitkä ovat 5 yleisintä virhettä;
• yksinkertainen ratkaisu näihin ongelmiin.

Ratkaisu on todella yksinkertainen, mutta se jätetään usein huomiotta jopa suurimmissa tuotemerkeissä. Korjataanko tämä virhe?

Käyttäjien odotukset

Lyhyesti sanottuna: Käyttäjät odottavat "palaa takaisin" -painiketta, joka näyttää heille, mitä he pitävät edellisenä sivuna. Sana "havaitse" on erittäin tärkeä, koska edelliseltä sivulta näyttävän ja teknisesti sen välillä on valtava ero.

Herää kysymys: mitä käyttäjät tarkalleen ottaen tulkitsevat uudeksi sivuksi? Useimmissa tapauksissa, jos sivu on visuaalisesti merkittävästi erilainen, mutta liittyy käsitteellisesti sivustoon, se koetaan uutena. Siksi on erittäin tärkeää seurata kuinka sivusto käsittelee erilaisia ​​interaktiivisia elementtejä: lightboxeja, lomakkeita, suodattimia jne.

Useimmat kävijät eivät ymmärrä teknisiä näkökohtia, vaan luottavat vain intuitiivisiin ideoihin siitä, miten resurssin pitäisi toimia. Siksi, kun he napsauttavat "takaisin" -painiketta, he odottavat sivua, jolla he ovat jo saaneet tärkeän kokemuksen, mutta he saavat sivun, jonka käyttöliittymä on hieman muuttunut.

Alla on suosituimmat interaktiiviset elementit ja suositukset niiden käyttämiseen käyttökokemuksen ja käytettävyyden maksimoimiseksi.

Peittokuvien ja valolaatikoiden käyttöönoton tarkoituksena on näyttää käyttäjälle elementti, joka näkyy sivun yläosassa. Siksi käyttäjät näkevät tällaiset elementit uusina sivuina ja palaavat alkuperäiseen paikkaansa painamalla "takaisin" -painiketta - mutta ne päätyvät täysin eri paikkaan kuin odottivat. Tämä on erityisen valitettavaa, koska valolaatikoiden käyttö vain moninkertaistaa negatiivisen käsityksen verkkosivusta - useimmat käyttäjät eivät pidä näistä elementeistä verkkokauppasivustoilla.

Suodattimien käyttö muuttaa usein sivun ja antaa ihmiselle uuden kokemuksen. Siksi lajittelun jälkeen sivu nähdään uutena, vaikka sille ei olisi ladattu mitään. Tämä johtuu siitä, että jokaisen kävijän vuorovaikutuksen jälkeen verkkokauppasivulla luodaan uusi tulos.

Tämä esimerkki korostaa, että ihmiset eivät ota huomioon teknisiä näkökohtia määrittäessään uusi sivu, mutta käytä vain intuitiota ja muodostunutta havaintoa.

3. Ilmoittautumis-/maksulomake

Maksusivut nähdään uusina sivuina ja vielä pahempaa - monivaiheisena prosessina, jonka jokainen vaihe voidaan peruuttaa "palaa" -painikkeella.

Tämä lähestymistapa voi aiheuttaa ongelmia; yksinkertainen esimerkki on, että henkilö haluaa palata askeleen taaksepäin lomakkeen täyttämisessä voidakseen muokata syötettyjä tietoja. Takaisin-painikkeen painaminen palauttaa sen ostoskoriin ja poistaa kaikki (!) syötetyt tiedot. Ärsytys ja poistuminen paikalta on luonnollinen vaikutus.

AJAX-tekniikka ei välttämättä vastaa käyttäjien odotuksia: Jokainen AJAX-sivu on teknisesti saman URL-osoitteen alla, mutta näyttää siltä, ​​että uusia sivuja avataan.

Kontekstissa verkkokauppa Käyttäjillä on selkeä käsitys siitä, että sivu 3 ja sivu 4 ovat erillisiä ja ne voidaan siirtyä sivulta 4 sivulle 3 takaisin-painikkeella.

Käyttäjät eivät ole valmiita luopumaan takaisin-painikkeesta

Ottaen huomioon tämän Internet-selaimen ominaisuuden laajan käytön, käyttäjien odotusten ja kehittäjien näkemyksen välinen ristiriita tulee kriittiseksi, eikä sitä pidä ottaa kevyesti.

Käyttäjät pitivät erityisesti "palaa" -painikkeesta mobiilisovelluksia ja verkkosivustot. Kuten tutkimus osoitti mobiiliversiot sivustoilla suurin osa käyttäjistä käytti tätä toimintoa kaikissa tarjotuissa resursseissa. Painikkeen käyttö ei myöskään rajoitu yhden sivun kelaamiseen taaksepäin - jotkut aiheet painoivat sitä jopa 15 (!) kertaa peräkkäin.

PC-käyttäjät myös usein painavat painiketta - mutta ei niin paljon kuin matkapuhelinten omistajat, koska käyttäjät pöytätietokoneet Kätevä sivustonavigointi on käytettävissä.

Ratkaisu

Hyvä uutinen on, että HTML5:llä on suhteellisen yksinkertainen ratkaisu ongelmaan, ja sitä kutsutaan nimellä HTML5 History API. Tarkemmin sanottuna history.pushState()-funktion avulla voit muuttaa URL-osoitetta lataamatta sivua uudelleen. Näin ollen sivusto käyttäytyy "palaa"-painiketta napsautetun käyttäjän odotusten mukaisesti.