Nëse nuk keni hasur kurrë më parë një objekt historik, mos u shqetësoni për të. Deri më tani, ai nuk mund të na ofronte asgjë të dobishme. Në fakt, objekti i historisë tradicionale ka vetëm një veti dhe tre metoda kryesore. Kjo pronë gjatësia- përmban informacion për numrin e artikujve në listën e historisë së shfletimit (d.m.th. në listën e faqeve të internetit të vizituara së fundi të mbështetur nga shfletuesi). Këtu është një shembull duke përdorur këtë pronë:
Alert ("Ju keni ruajtur" + history.length + "faqet në historikun e shfletuesit tuaj.");
Historia.mbrapa ();
Efekti i kësaj metode është i njëjtë me atë që përdoruesi shtyp butonin Kthehu të shfletuesit. Në mënyrë të ngjashme, ju mund të përdorni metodën përpara () për të ecur një hap përpara ose metodë shko () për të shkuar përpara ose prapa një numër të caktuar hapash.
Por asnjë nga këto nuk ka shumë vlerë nëse nuk dëshironi të krijoni butonat tuaj Prapa dhe Përpara për faqen e internetit. Por HTML5 shton disa veçori shtesë në këtë objekt historik që mund të përdoren për të përmbushur qëllime shumë më ambicioze.
Kryesorja ndër këto mundësi është metoda pushState (). i cili ju lejon të ndryshoni URL-në në shiritin e adresave të shfletuesit pa rifreskuar përmbajtjen e faqes. Ky funksion është i dobishëm në një situatë specifike, domethënë kur krijoni faqe dinamike që ngarkojnë në heshtje përmbajtje të re dhe përditësohen pa probleme. Në një situatë të tillë, URL-ja e faqes dhe përmbajtja e saj mund të mos përputhen.
Për shembull, nëse një faqe ngarkon në mënyrë dinamike përmbajtje nga një faqe tjetër, URL-ja origjinale e faqes nuk ndryshon, gjë që mund të shkaktojë një sërë problemesh për shënimin e faqeve për atë faqe. Ky problem mund të zgjidhet duke ndjekur historikun e sesioneve.
Nëse nuk mund ta shihni ende se si ta bëni këtë, mos u shqetësoni, në seksionin tjetër do t'i hedhim një sy një faqeje të përsosur për aplikimin e historisë suaj të shfletimit.
16 përgjigje
Përgjigja e shkurtër është se nuk mundesh.
Teknikisht, ekziston një mënyrë e saktë për të vërtetuar:
Historia.e mëparshme
Megjithatë, kjo nuk do të funksionojë. Problemi është se në shumicën e shfletuesve kjo konsiderohet një shkelje e sigurisë dhe zakonisht thjesht kthehet të papërcaktuara.. p>
Historia.gjatësia
Kjo është një pronë që të tjerët e kanë sugjeruar ...
por gjatësia nuk funksionon plotësisht sepse nuk e specifikoni në histori , ku... Gjithashtu, jo gjithmonë fillon me të njëjtin numër. Për shembull, një shfletues i pakonfiguruar për faqen e uljes fillon në 0, ndërsa një shfletues tjetër që përdor faqen e lidhjes fillon në 1.
Historia.mbrapa ();
Historia.go (-1);
dhe ai thjesht priste që nëse nuk mund të ktheheni, atëherë klikimi në lidhje nuk bën asgjë.
Kodi im lejon shfletuesin të kthehet një faqe prapa, dhe nëse kjo dështon, ngarkon url-në e kthimit. Ai gjithashtu zbulon ndryshimet e hashtagut.
Nëse butoni prapa nuk është i disponueshëm, url-ja e kthimit do të ngarkohet në 500 ms, kështu që shfletuesi ka kohë të mjaftueshme për të ngarkuar faqen e mëparshme. Ngarkimi i URL-së së kthimit menjëherë pas window.history.go (-1); do të bëjë që shfletuesi të përdorë url-në e kthimit sepse skripti js nuk është ndalur ende.
Historia e funksionitBackWFallback (fallbackUrl) (fallbackUrl = falbackUrl || "/"; var prevPage = window.location.href; window.history.go (-1); setTimeout (funksioni () (if (window.location.href == prevPage ) (window.location.href = backbackUrl;)), 500);)
kjo duket si një mashtrim:
Funksioni goBackOrClose () (window.history.back (); window.close (); // ose nëse nuk jeni të interesuar të mbyllni dritaren, bëni diçka tjetër këtu //p.sh. TheBrowserCantGoBack ();)
Calling history.back () dhe më pas window.close (). Nëse shfletuesi mund të kthehet në histori, ai nuk do të mund të kalojë në deklaratën tjetër. Nëse ai nuk mund të kthehet, ai do të mbyllë dritaren.
Vini re, megjithatë, se nëse faqja u arrit duke shtypur url-në, atëherë firefox do të parandalojë mbylljen e dritares nga skripti.
Nuk mund të kontrolloni drejtpërdrejt nëse butoni Prapa është i disponueshëm. Mund të shikoni history.length> 0, por kjo do të jetë e vërtetë nëse faqet janë përpara dhe në faqen aktuale. Mund të jeni i sigurt që butoni Prapa është i papërdorshëm vetëm nëse historia.gjatësi === 0.
Nëse kjo nuk është mjaftueshëm e mirë, gjithçka që mund të bëni është të telefononi history.back () dhe, nëse faqja juaj është ende e ngarkuar, butoni prapa është gri! Sigurisht, kjo do të thotë që nëse butoni prapa është i disponueshëm, ju sapo jeni larguar nga faqja. Nuk ju lejohet të anuloni navigimin gjatë shkarkimit, kështu që gjithçka që mund të bëni për të ndalur në fakt të kundërtën është të ktheni diçka nga onforeunload, gjë që do të rezultojë në një kërkesë të madhe të bezdisshme. Nuk ia vlen.
Në fakt, zakonisht është një ide shumë e keqe të bësh diçka me historinë. Navigimi i historisë është për shfletuesin Chrome, jo për faqet e internetit. Shtimi i lidhjeve prapa është zakonisht më konfuz për përdoruesit sesa ia vlen.
Kështu e bëra.
Kam përdorur eventin "para shkarkimit" për të vendosur një vlerë boolean. Më pas vendosa një kohë për të parë nëse "përpara shkarkimit" është shkaktuar.
Var $dritare = $ (dritare), $ trigger = $ (". Zgjidh_lidhjen_tuaj"), kthesë = "url_i_fallback_tuaj"; kaHistory = false; $ window.on ("para shkarkimit", funksioni () (hasHistory = e vërtetë;)); $ trigger.on ("kliko", funksioni () (window.history.go (-1); setTimeout (funksioni () (nëse (! hasHistory) (window.location.href = kthim;)), 200); kthim i rremë;));
Duket se funksionon në shfletuesit kryesorë (të testuar FF, Chrome, IE11 deri më tani).
Ka një fragment në projektet e mia:
Funksioni mbrapa (url) (if (history.length> 2) (// nëse historia nuk është bosh, kthehu: window.History.back ();) përndryshe nëse (url) (// shko te url-ja e specifikuar e kthimit: dritarja .History.replaceState (null, null, url);) tjetër (// shkoni në shtëpi: dritare.History.replaceState (null, null, "/");))
FYI: Unë jam duke përdorur History.js për të menaxhuar historinë e shfletuesit.
Pse të krahasohet historia.gjatësia me numrin 2?
Sepse fillimi faqe kromi konsiderohet si artikulli i parë në historinë e shfletuesit.
Ka disa mundësi për historikun.gjatësinë dhe sjelljen e përdoruesit:
- Përdoruesi hapet skedë e re bosh në shfletues dhe më pas drejton faqen. history.length = 2 dhe ne duam të çaktivizojmë back () në këtë rast sepse përdoruesi do të shkojë në një skedë të zbrazët.
- Përdoruesi hap faqen në Tab i ri duke klikuar një lidhje diku më parë. history.length = 1 dhe përsëri duam të çaktivizojmë metodën back ().
- Më në fund, përdoruesi dërgohet në faqen aktuale pas ringarkoni shumë faqe... history.length> 2 dhe tani back () mund të aktivizohet.
Shënim: Më mungon rasti kur përdoruesi dërgohet në faqen aktuale pasi klikon një lidhje nga një sajt i jashtëm pa objektiv = "_ bosh".
Shënim 2: document.referrer është bosh kur hapni faqen e internetit duke futur url-në e saj dhe gjithashtu kur faqja e internetit përdor ajax për të ngarkuar nënfaqet, kështu që unë ndalova së kontrolluari këtë vlerë në rastin e parë.
history.length është e padobishme pasi nuk tregon nëse përdoruesi mund të kthehet në histori. Gjithashtu, shfletues të ndryshëm përdorin një vlerë fillestare prej 0 ose 1 - kjo varet nga shfletuesi.
Një zgjidhje funksionale është përdorimi i $ (window) .on (ngjarja "para shkarkimit", por nuk jam i sigurt nëse do të funksionojë nëse faqja ngarkohet përmes ajax dhe përdor pushState për të ndryshuar historinë e dritares.
Pra, përdora zgjidhjen e mëposhtme:
Var aktualUrl = dritare.lokacioni.href; dritare.histori.mbrapa (); setTimeout (funksioni () (// nëse vendndodhja nuk është ndryshuar për 100 ms, atëherë nuk ka histori mbrapa nëse (currentUrl === window.location.href) (// ridrejtuar në faqen rrënjë window.location.href = "/ "; ) ), njeqind);
Kini kujdes me window.history.length sepse përmban gjithashtu hyrje për window.history.forward ()
Në këtë mënyrë ju mund të keni window.history.length me më shumë se 1 hyrje, por pa hyrje në histori. Kjo do të thotë se asgjë nuk do të ndodhë nëse ekzekutoni window.history.back ()
Unë dola me qasjen e mëposhtme. Ai përdor ngjarjen onbeforeunload për të përcaktuar nëse shfletuesi po largohet nga faqja apo jo. Nëse në një periudhë të caktuar kohore nuk do të ridrejtohet në një kopje rezervë.
Var goBack = funksioni GoBack (kthim prapa) (var useFallback = i vërtetë; window.addEventListener ("para shkarkimit", funksioni () (useFallback = false;)); window.history.back (); setTimeout (funksioni () (nëse (useFallback ) (window.location.href = backback;)), 100);)
Ju mund ta telefononi këtë funksion duke përdorur goBack ("fallback.example.org").
window.location.pathname do t'ju japë URI-në aktuale. Për shembull, https: // domain / pyetje / 1234 / i-have-a-problem do të kthehet / pyetje / 1234 / i-have-a-problem. Shihni dokumentacionin rreth window.location
Pastaj thirrja e funksionit të ndarjes () do të na japë të gjitha fragmentet e asaj URI. Pra, nëse marrim URI-në tonë të mëparshme, do të kemi diçka si ["", "pyetje", "1234", "i-have-a-problem"]. Shihni dokumentacionin rreth String.prototype.split () për marrjen informacion shtese.
Thirrja e filtrit () është këtu për të filtruar vargun bosh të krijuar nga vija e prapme. Ai do të kthejë vetëm një copë URI që është më e gjatë se 1 (varg jo bosh). Pra, ne kemi diçka si ["pyetje", "1234", "i-have-a-pyetje"]. Mund të shkruhet kështu:
"përdor strikte"; window.location.pathname.split ("/") filtër (funksioni (fragment) (fragmenti i kthimit. gjatësia> 0;));
Shikoni dokumentacionin mbi Array.prototype.filter () dhe Destructuring qëllim për më shumë informacion.
Tani, nëse një përdorues përpiqet të kthehet ndërsa është në https: // domain /, ne nuk do të ekzekutojmë një deklaratë if dhe për rrjedhojë jo window.history.back () thërrasim window.history.back () për ta mbajtur përdoruesin në faqen tonë të internetit . Kjo URL do të jetë ekuivalente me atë që ka gjatësi 0, dhe 0> 0 është false. Prandaj, ai dështon në heshtje. Sigurisht, nëse dëshironi, mund të regjistroni diçka ose të bëni një veprim tjetër.
"përdor strikte"; funksioni previousPage () (nëse (window.location.pathname.split ("/"). filtër (((gjatësia)) => gjatësi> 0) .length> 0) (window.history.back ();) tjetër ( alarm ("Nuk mund të kthehesh më mbrapa ...");))
Kufizimet
Sigurisht, kjo zgjidhje nuk do të funksionojë nëse shfletuesi nuk e mbështet API-në e Historisë. Kontrolloni dokumentacionin për të ditur më shumë rreth kësaj përpara se të përdorni këtë zgjidhje.
Përpara HTML5, e vetmja gjë që nuk mund ta kontrollonim dhe menaxhonim (pa ringarkuar përmbajtjen ose hakimet me location.hash) është historia e një skede. Me ardhjen e API-së së historisë HTML5, gjithçka ka ndryshuar - tani ne mund të ecim nëpër histori (përpara se të mundeshim gjithashtu), të shtojmë elementë në histori, të reagojmë ndaj tranzicioneve përmes historisë dhe gjëra të tjera të dobishme. Në këtë artikull, ne do t'i hedhim një vështrim API-së së Historisë HTML5 dhe do të shkruajmë një shembull të thjeshtë për të ilustruar aftësitë e tij.
Konceptet bazë dhe sintaksa
API-ja e Historisë mbështetet në një ndërfaqe DOM, objektin Historia. Çdo skedë ka një objekt unik History të vendosur në window.history. Historia ka disa metoda, ngjarje dhe veti që ne mund t'i manipulojmë nga JavaScript. Çdo faqe skedash (objekt dokumenti) është një objekt i koleksionit të Historisë. Çdo element historie përbëhet nga një URL dhe/ose një objekt i gjendjes, mund të ketë një titull, objekt dokumenti, të dhëna formulari, pozicionin e lëvizjes dhe informacione të tjera që lidhen me faqen.Metodat kryesore të objektit të Historisë:
- window.history.length: Numri i regjistrimeve në sesionin aktual të historisë
- window.history.state: Kthen objektin aktual të historisë
- window.history.go (n): Një metodë për të ecur nëpër histori. Një kompensim në lidhje me pozicionin aktual kalohet si argument. Nëse kalohet 0, ai do të përditësohet Faqja aktuale... Nëse indeksi del jashtë historisë, atëherë asgjë nuk do të ndodhë.
- window.history.back (): E njëjta metodë si thirrja e go (-1)
- window.history.forward (): E njëjta metodë si thirrja e go (1)
- window.history.pushState (të dhënat, titulli [, url]): Shton një artikull historie.
- window.history.replaceState (të dhënat, titulli [, url]): Përditëson artikullin aktual të historisë
history.go (-2)
Ne mund të përdorim history.pushState për të shtuar artikuj të historisë:
history.pushState ((foo: "bar"), "Title", "/baz.html")
Për të ndryshuar rekordin e historisë, mund të përdorim history.replaceState:
history.replaceState ((foo: "bat"), "Titulli i ri")
Shembull i gjallë
Tani që i dimë bazat, le të hedhim një vështrim në një shembull të drejtpërdrejtë. Ne do të bëjmë një menaxher skedari në ueb që do t'ju lejojë të gjeni URI-në e imazhit të zgjedhur (). Menaxheri i skedarëve përdor një të thjeshtë strukturën e skedarit shkruar në JavaScript. Kur zgjidhni një skedar ose dosje, fotografia përditësohet në mënyrë dinamike.Ne përdorim atributet e të dhënave-* për të ruajtur titullin e çdo imazhi dhe përdorim veçorinë e të dhënave për të marrë këtë veti:
Për të bërë gjithçka të funksionojë shpejt, ne ngarkojmë të gjitha imazhet dhe përditësojmë atributin src në mënyrë dinamike. Ky përshpejtim paraqet një problem - thyen butonin e kthimit, kështu që nuk mund të shkoni përpara ose prapa nëpër foto.
Historia HTML5 vjen në shpëtim! Sa herë që zgjedhim një skedar, krijohet një rekord i ri historik dhe përditësohet vendndodhja e dokumentit (ai përmban një URL unike të imazhit). Kjo do të thotë që ne mund të përdorim butonin prapa për të përshkuar imazhet tona, ndërsa në shiritin e adresave do të kemi një lidhje të drejtpërdrejtë me imazhin që mund të shënojmë ose t'ia dërgojmë dikujt.
Kodi
Kemi 2 diva. Njëra përmban strukturën e dosjes, tjetra përmban foton aktuale. I gjithë aplikacioni drejtohet nga JavaScript. Vetëm pikat më të rëndësishme do të trajtohen. Kodi burimor për shembullin është shumë i shkurtër (rreth 80 rreshta), kontrollojeni pasi të keni lexuar të gjithë artikullin.Metoda bindEvents varet nga mbajtësit për ngjarjen popstate, e cila thirret kur përdoruesi lundron nëpër histori dhe lejon aplikacionin të përditësojë gjendjen e tij.
window.addEventListener ("popstate", funksioni (e) (self.loadImage (e.state.path, e.state.note);), false);
Objekti i ngjarjes që i kalohet mbajtësit të ngjarjeve popstate ka një veti shtetërore - këto janë të dhënat që ne kaluam si argumentin e parë për pushState ose zëvendësimState.
Ne varim një mbajtës për ngjarjen e klikimit në div, i cili përfaqëson strukturën tonë të skedarit. Duke përdorur delegimin e ngjarjeve, ne hapim ose mbyllim një dosje ose ngarkojmë një fotografi (duke shtuar një hyrje në histori). Ne shikojmë emrin e klasës së elementit prind për të kuptuar se cilin prej elementeve kemi klikuar:
- Nëse kjo është një dosje, ne e hapim ose mbyllim atë
- Nëse kjo është një fotografi, atëherë ne e shfaqim atë dhe shtojmë një element të historisë
Dir.addEventListener ("kliko", funksioni (e) (e.preventDefault (); var f = e.target; // Ky është një dosje nëse (f.parentNode.classList.contains ("folder")) (// Hapni ose mbyllni dosjen self.toggleFolders (f);) // Kjo është fotografia tjetër nëse (f.parentNode.classList.contains ("foto")) (shënim = f.dataset? f.dataset.shënim: f. getAttribute ("shënim i të dhënave"); // vizatoni figurën self.loadImage (f.textContent, shënim); // shtoni elementin e historisë history.pushState ((shënim: shënim, shteg: f.textContent)," ", f.tekstPërmbajtja);)) , false);
Metoda që ndryshon përmbajtjen e imazhit dhe përditëson nënshkrimin e saj është shumë e thjeshtë:
loadImage: funksioni (rruga, shënimi) (img.src = shteg; h2.textContent = shënim;)
Ne morëm një aplikacion të thjeshtë që tregon mundësitë ndërfaqe e përditësuar Objekti historik. Ne përdorim pushState për të shtuar një artikull historik dhe një ngjarje popstate për të përditësuar përmbajtjen e faqes. Përveç kësaj, kur klikojmë mbi një foto, ne marrim adresën e saj të vlefshme në shiritin e adresave, të cilën mund ta ruajmë ose t'ia dërgojmë dikujt.
Kur mund ta përdorni?
Firefox 4+Safari 5+
Chrome 10+
Opera 11.5+
iOS Safari 4.2+
Android 2.2+
dmth ???
Lista e shfletuesve që mbështesin API-në e historisë
Deri kohët e fundit, ne zhvilluesit nuk mund të bënim shumë me gjendjen dhe historinë e shfletuesit. Ne mund të kontrollojmë numrin e artikujve në histori dhe t'i shtyjmë përdoruesit përpara dhe prapa, por kjo ofron pak përfitim për përdoruesit. Me rritjen e faqeve të internetit më dinamike, ne kemi nevojë për më shumë kontroll. Fatmirësisht, HTML5 na e jep atë kontroll duke zgjeruar API-në e Historisë së JavaScript.
Cila është pika?
Është e vetëkuptueshme që URL-të janë të rëndësishme. Ata janë të metodë e aksesimit në koleksionet e gjera të informacionit dhe burimeve në ueb, dhe së fundmi, ato kanë filluar të përfaqësojnë gjendjen e synuar të një aplikacioni ueb. Ju mund t'i kopjoni këto URL dhe t'i ndani me miqtë tuaj ose t'i përdorni ato për të krijuar lidhje nga çdo dokument HTML. Ato janë venat e rrjetës, dhe ju duhet të kujdeseni.
Më parë, JavaScript History API ofronte disa funksione shumë të thjeshta:
// Kontrollo gjatësinë e stackit të historisë console.log (history.length); // Dërgoni agjenti i përdoruesit përpara console.log (histori.përpara ()); // Dërgo agjentin e përdoruesit prapa console.log (history.back ()); // Dërgo agjentin e përdoruesit prapa (negativ) ose përpara (pozitiv) // me një numër të caktuar artikujsh console.log (history.go (-3));
Me aplikacione dinamike në internet Ajax, ku përditësohet shfletuesi Faqja në pjesë në vend që të ndryshoni plotësisht vendndodhjen, është e vështirë t'i jepni përdoruesit një URL për të shënuar ose ndarë gjendjen aktuale të aplikacionit. Identifikuesit e fragmenteve, si ata të përdorur në titujt e këtij artikulli nëpërmjet atributit id, ofrojnë disa informacione për gjendjen, por ato varen tërësisht nga skriptet e klientit.
Ruajeni këtë skedar dhe hapeni në redaktorin tuaj të preferuar. Duhet të aksesohet nëpërmjet HTTP, kështu që ju duhet ose një server lokal (p.sh. http: // localhost /) ose një ueb në internet server në të cilin mund të ngarkoni. Shikimi i skedarit drejtpërdrejt duke përdorur funksionin Open File të shfletuesit tuaj nuk do të funksionojë, pasi përdor skedarin: // protokollin dhe jo HTTP. Gjithashtu sigurohuni që të përditësoni atributet href në secilën prej lidhjeve të navigimit për të siguruar përdorimin e strukturës së saktë të drejtorisë. Personalisht, unë jam duke e parë demonstrimin lokal në http: // localhost / history.
Ne do të punojmë ekskluzivisht brenda etiketoni, shtoni një dëgjues të ri për ngjarjen popstate:
// Kthehu në një gjendje të ruajtur më parë window.addEventListener ("popstate", funksion (ngjarje) (console.log ("popstate ndezur!"); UpdateContent (event.state);));
Ne bashkojmë dëgjuesin e ngjarjes në dritare, e cila është përgjegjëse për ndezjen e ngjarjes, dhe ia kalojmë këtë ngjarje mbajtësit tonë. Ne regjistrojmë një mesazh (që të mund të shohim se kur po aktivizohet kjo ngjarje) dhe më pas përditësojmë përmbajtjen duke përdorur gjendjen që kemi ruajtur më parë. Shteti i është bashkangjitur objektit të ngjarjes nëpërmjet pronës shtetërore.
Hapeni faqen e freskët në shfletuesin tuaj, klikoni si më parë dhe më pas klikoni prapa. Si më parë, URL-ja në shiritin e adresave ndryshon ndërsa kaloni nëpër gjendje, por tani përmbajtja gjithashtu është rikthyer në atë që duhet të jetë. Klikoni përpara dhe përmbajtja është gjithashtu restauruar saktë.
Nëse shikoni konsolën e zhvilluesit në Chrome kur ngarkoni faqen për herë të parë, do të shihni që ngjarja popstate të aktivizohet menjëherë, para se të klikoni një lidhje. Kjo është për shkak se Chrome e konsideron ngarkesën fillestare të faqes si një ndryshim në gjendje, dhe kështu e ndez ngjarjen. Në këtë rast, prona shtetërore është e pavlefshme, por fatmirësisht funksioni updateContent merret me këtë. Mbajeni këtë parasysh kur zhvilloni, pasi mund t'ju tërheqë, veçanërisht nëse shfletuesit e tjerë supozojnë këtë sjellje.
Rishkrimi i historisë
Fatkeqësisht, sado fantastik të jetë HTML5, ai nuk na lejon udhëtimin aktual në kohë. Nëse do të ndodhte, unë do të kthehesha në fëmijërinë time dhe do t'i thosha një më të voglit tim: "Po, duhet të kesh një fetë tortë". Merre atë si të duash.
Sidoqoftë, API-ja e Historisë na lejon të korrigjojmë artikujt tanë të regjistrit të historisë. Për shembull, ne mund të përditësojmë gjendjen aktuale në përgjigje të hyrjes së përdoruesit të ri në një formë. Këtë mund ta bëjmë me history.replaceState.
replaceState funksionon njësoj si pushState, me të njëjtat parametra, me përjashtim të faktit që përditëson hyrjen aktuale në vend që të shtojë një të re. Mund të mendoj për një situatë në demonstrimin tonë ku kjo mund të përdoret: ngarkimi fillestar i faqes. Nëse klikoni përsëri për një kohë mjaft të gjatë, do të zbuloni se kthimi në URL-në origjinale nuk ju ofron përmbajtjen origjinale. Le ta rregullojmë këtë duke shtuar sa vijon në fund të skenarit tonë:
// Ruaje përmbajtjen fillestare që të mund ta rishikojmë më vonë history.replaceState ((përmbajtja: contentEl.textContent, foto: photoEl.src), document.title, document.location.href);
Ndërsa kjo funksionon kur faqja ngarkohet, ruan gjendjen fillestare të faqes. Ne mund ta ngarkojmë këtë gjendje më vonë kur përdoruesi shfleton përsëri në këtë pikë nëpërmjet dëgjuesit të ngjarjeve që kemi vendosur më parë. Mund ta provoni duke ngarkuar faqen, duke klikuar disa lidhje dhe më pas duke rikthyer derisa të ktheheni në URL-në origjinale. Përmbajtja fillestare është rikthyer!
Demo
Unë kam vendosur një demonstrim të kodit tonë të përfunduar. Unë kam shtuar gjithashtu një magji të vogël për t'i bërë URL-të tona të history.pushState të funksionojnë si një sajt i vërtetë. Mos harroni se URL-të që shtyni duhet të jenë URL të drejtpërdrejta që përdoruesi mund t'i shënojë dhe t'i ndajë si pika hyrëse reale në faqen tuaj.
Mbështetja e shfletuesit
Kopjet e përditësuara të Chrome (5+), Safari (5.0+), Firefox (4.0+) dhe Opera (11.50+) kanë mbështetje për API-në e re të Historisë. Edhe disa shfletues celularë funksionojnë mirë, si Mobile Safari në iOS 4+. Fatkeqësisht, IE 9 dhe më poshtë nuk ka mbështetje, por kur të arrijë.
Safari 5.0 ndonjëherë shfaq një të çuditshme: lundrimi midis gjendjeve bën që rrotulluesi i ngarkimit të shfaqet dhe të qëndrojë edhe kur gjendja është ngarkuar. Kjo ndalon kur ju largoheni duke përdorur një lidhje ose veprim që nuk përfshin një gjendje të ruajtur nga API-ja e Historisë.
Polyfill
Ekziston një polifill për API-në e Historisë. Emri i duhur History.js përdor ngjarjen e ndryshimit të hash të HTML4 me identifikuesit e fragmenteve të dokumentit për të imituar API-në e historisë në shfletuesit e vjetër. Nëse një nga URL-të hash përdoret nga një shfletues modern, ai përdor zëvendësimin e shtetit për të korrigjuar në heshtje URL-në.
Duket si magji, por sigurohuni që jeni të vetëdijshëm për pasojat e përdorimit të identifikuesve të fragmenteve, siç u përmend më parë në këtë artikull. Si i tillë, autori i History.js ka përgatitur një udhëzues të titulluar Trajtimi Inteligjent i Shtetit.
Mbyllja e mendimeve
URL-të shkojnë përtej vetëm seancës së shfletimit të një përdoruesi. Ata janë shënues historikisht të rëndësishëm për burimet që mund të mbeten në përdorim për shumë vite në vijim. Para se të filloni zhvillimin e JavaScript-it të faqes suaj, duhet të mendoni për dizajnin e URL-ve tuaja. Bëjini ato kuptimplota dhe të organizuara. Sigurohuni që mund t'i qaseni drejtpërdrejt pa JavaScript. Vetëm atëherë duhet të shtoni JavaScript-in tuaj për të përmirësuar përvojën e shfletimit.
Kategoria
26 Përgjigje për artikullin "Shtyrja dhe dalja me API-në e historisë"
Unë fjalë për fjalë * sapo * e zbulova këtë dhe punova për këtë për një klient dy javë më parë. Madje mendova të shkruaja një blog në lidhje me të për shkak se sa bukur e gjeta këtë. Kjo me të vërtetë mund të jetë një ndryshim i lojës.
Jam i habitur që nuk e keni mbuluar tiparin history.state? Unë besoj se ky është specifikimi aktual, megjithëse funksionon vetëm në Firefox. Kodi i përdorur këtu, ndërsa funksionon, mendova se ishte pjesë e versionit origjinal të specifikimit. Gjithashtu, vlen të përmendet se ju * supozohet * të kaloni në objektin JavaScript si në shembullin tuaj. Blogu IE i Microsoft-it ka shembuj ku kalohet një varg. Unë nuk e kam testuar mbështetjen për këtë nëpër shfletues, por ia vlen të përmendet.
Fjalë për fjalë nuk mund t'ju them se sa orë i gjithë botimi "Ruaj përmbajtjen fillestare që të mund ta rishikojmë më vonë" doli të ishte një problem për mua. Më duket jointuitive që gjendja e paracaktuar në të cilën keni ardhur nuk është në pirgun e historisë.
Po provoj faqen demo Internet Explorer 9 dhe nuk mund të bëj ndonjë ndryshim me Chrome, kështu që duket se funksionon.
Do ta përdor këtë artikull për një projekt të ardhshëm, me siguri. Faleminderit!
faleminderit për ndarjen e përvojës tuaj, shumë informuese.
Ju lutemi mund të elaboroni se çfarë keni bërë në server për të trajtuar URL-të e rreme? A janë ato ridrejtime manuale që keni futur, apo rishkrime automatike? Si konvertohen?
Shume faleminderit!
Ndërkohë, unë avancova pak në të njëjtën temë. Nëse serveri juaj i uebit është Apache, mund ta konfiguroni atë të përdorë mod_rewrite, i cili lejon konvertimin e URL-ve të shtypura nga përdoruesi (ose zvarritës) në URL-të e tjerë të anës së serverit:
Kjo bëhet duke shtuar një numër rregullash në .htaccess në rrënjë të faqes suaj të internetit.
Fjalë për fjalë, sapo publikova faqen time të re e cila përdor këtë teknikë. Punon bukur!
Është mirë që (ndoshta) të jesh në gjendje të eliminosh hash-et dhe hashbangs në sajtet e ardhshme të bazuara në ajax.
Mezi pres me padurim të shoh se si përdoret kjo pasi është miratuar më gjerësisht.
Problemet e vetme lindin (siç ndodh shpesh) me zbatimin e kësaj ndërshfletuesi. API-ja e historisë mund të mbështetet nga shfletuesit që përmendët, por me shkallë të ndryshme suksesi.
Shiko History.js (vini re "H" të madhe) nga Ben Lupton këtu: https: //github.com/balupton/History.js/ i cili ofron një mjet për të përdorur gjendjet e historisë HTML5 duke llogaritur mospërputhjet e shfletuesit craoos.
Përsëri, artikull i mrekullueshëm. Me të vërtetë zbret në parimet themelore.
Kjo është e shkëlqyeshme, por nëse nuk funksionon në IE9 ose më poshtë, është shumë e padobishme për vendet e prodhimit aktualisht (pa shumë hakime të çrregullta dhe kthime!)
@Raphael + Eric:
Kërkoj falje për përgjigjen e vonuar! Për qëllimet e demonstrimit, unë përdora një konfigurim shumë bazë mod_rewrite dhe PHP.
RewriteRule ^ (me gëzof | çorape | mustaqe | bob) $ index.php? P = 1 $
Rregulli i mësipërm i rishkrimit maskon URL-të demo dhe e kalon atë në një skedar të vetëm PHP me një varg pyetjesh se çfarë mace po përpiqet të shikojë përdoruesi. Skedari PHP më pas kontrollon se $ _GET ["p"] është i vlefshëm (gjithmonë pastroni dhe kontrolloni të dhënat tuaja sipas nevojës), më pas duke përdorur variablat e paracaktuara që kam vendosur për atë mace.
Nëse ky do të ishte një aplikacion i vërtetë, shtegu i kërkuar mund të përdoret për të ndërtuar pyetje të bazës së të dhënave (sigurisht të sanizuar) për të tërhequr përmbajtje më dinamike. CMS si WordPress përdorin diçka të tillë për zbatimin e tyre "URL të pastër".
Shpresoj se kjo ndihmon.
A do të ishte e mundur ta shihni atë skedar htaccess më afër? Unë kuptoj gjithçka që ndodh këtu, brenda pjesës së historisë api, përveç mod_rewrite. A keni në të vërtetë më shumë faqe që jetojnë diku për secilën nga këto mace të ndryshme? Rifreskimi i faqes pasi klikoni disa nga macet kthen një gabim të faqes që nuk u gjet. Kjo ka të bëjë me pjesën htaccess që më mungon, apo jo? Faleminderit.
Pavarësisht komentit tim më lart për mbështetjen e dobët të shfletuesit, vendosa të kaloj nga URL-të e hashuara (/ # / slug) në historikun HTML5 për http://goproheroes.com dhe vendosa të kthehem në ngarkimin normal të faqeve për IE9 dhe më poshtë duke përdorur:
funksioni supports_history_api () (
kthimi !! (dritare.historia && historia.pushState);
}
Faleminderit Mike, demonstrimi juaj më ndihmoi. E kisha përpjekjen time pak më të komplikuar nga ç'duhej.
Megjithatë, po përpiqem të gjurmoj dhe zbuloj kur përdoruesi hap përpara dhe mbrapa nëpër histori, në mënyrë që të mund të shtoj tranzicione të përshtatshme në faqen time. Fatkeqësisht, API-ja e historisë nuk ju bën të ditur nëse një buton përpara ose prapa është klikuar në një ngjarje popstate. Kjo do të ishte vërtet e dobishme.
Unë jam duke menduar se një cookie mund të jetë mënyra e vetme për të tentuar të gjurmoni porosinë. Ruajtja e një ndryshoreje të mëparshme në objektin e gjendjes i komplikoi gjërat dhe shkaktoi probleme të shfletuesit.
Duke shtuar në listë,
faleminderit Mike!
Ato kotele të adhurueshme më ndihmuan të konfiguroja disa funksione shtytjeje dhe kërcimesh në versionin e ri të faqes sime që do të dalë së shpejti!
Faleminderit për tut!
Në funksionin tuaj të klikimit, keni diçka të gabuar në kodin tuaj postar (megjithatë është në rregull në kittieland):
1. Objekti i ngjarjes deklarohet në argumente si "e", jo "ngjarje".
2. Nuk ka përditësimPërmbajtje (); ! Më duhej të kontrolloja burimin tuaj të punës për të parë nëse po bëja diçka të gabuar.
Por prisni, ka edhe më shumë! ... edhe disa përditësime:
3. Chrome 19+ fillon të përzihet me veçoritë shtetërore të ngjarjes dhe gjërave të tjera.
Si këshillë: kam përdorur një setTimeout të çalë () për të lidhur dëgjuesin e ngjarjeve në mënyrë që të kapërcej dëshirën e Chrome për të shfaqur gjendjen e tij.
