Dacă nu ați văzut niciodată un obiect istoric, nu vă faceți griji. Până acum nu a putut să ne ofere nimic util. În realitate, un obiect de istorie tradițională are o singură proprietate și trei metode principale. Această proprietate lungime- conține informații despre numărul de articole din lista istoricului de navigare (adică lista paginilor web vizitate recent, întreținută de browser). Iată un exemplu de utilizare a acestei proprietăți:
Alert("Ați salvat paginile " + history.length + " în istoricul browserului dvs..");
History.back();
Efectul acestei metode este echivalent cu clicul utilizatorului pe butonul „Înapoi” al browserului. Într-un mod similar, puteți utiliza metoda redirecţiona() a face un pas înainte sau metodă merge() pentru a deplasa înainte sau înapoi un anumit număr de pași.
Dar nimic din toate acestea nu este de mare valoare decât dacă doriți să vă creați propriile butoane înapoi și înainte pentru pagina dvs. web. Dar HTML5 adaugă mai multe capacități suplimentare acestui obiect istoric care pot fi folosite pentru a atinge obiective mult mai ambițioase.
Principala dintre aceste caracteristici este metoda pushState(), care vă permite să schimbați adresa URL din bara de adrese a browserului fără a actualiza conținutul paginii. Această caracteristică este utilă într-o situație specifică, și anume atunci când se creează pagini dinamice care încarcă în tăcere conținut nou și se actualizează fără probleme. În această situație, este posibil ca adresa URL a paginii și conținutul acesteia să nu se potrivească.
De exemplu, dacă o pagină încarcă dinamic conținut dintr-o altă pagină, adresa URL inițială a paginii nu se va modifica, ceea ce poate cauza tot felul de probleme cu marcarea paginii respective. Această problemă poate fi rezolvată prin urmărirea istoricului sesiunii.
Dacă nu vedeți încă cum să faceți acest lucru, nu vă faceți griji, în secțiunea următoare ne vom uita la o pagină care este ideală pentru a vă folosi istoricul de navigare.
16 răspunsuri
Răspunsul scurt este: nu poți.
Din punct de vedere tehnic, există o modalitate exactă de a verifica autenticitatea:
Istorie.anterior
Totuși, acest lucru nu va funcționa.
Problema este că, în majoritatea browserelor, aceasta este considerată o încălcare a securității și de obicei returnează doar nedefinit.. p>
Istorie.lungime
Cu toate acestea, lungimea nu funcționează în întregime pentru că nu specificați unde în poveste. De asemenea, nu începe întotdeauna cu același număr. De exemplu, un browser care nu este configurat pentru o pagină de destinație începe la 0, în timp ce un alt browser care utilizează o pagină de destinație începe la 1.
History.back();
History.go(-1);
și doar se aștepta ca, dacă nu te poți întoarce, atunci făcând clic pe link nu ar face nimic.
Codul meu permite browserului să revină la o pagină și, dacă aceasta nu reușește, încarcă o adresă URL de rezervă. De asemenea, detectează modificările hashtagurilor.
Dacă butonul înapoi nu este disponibil, adresa URL de rezervă va fi încărcată după 500 ms, astfel încât browserul are suficient timp pentru a încărca pagina anterioară. Încărcarea adresei URL de returnare imediat după window.history.go(-1); va determina browserul să folosească adresa URL de rezervă deoarece scriptul js nu s-a oprit încă.
Istoricul funcțieiBackWFallback(fallbackUrl) ( fallbackUrl = fallbackUrl || "/"; var prevPage = window.location.href; window.history.go(-1); setTimeout(function())( if (window.location.href == prevPage ) ( window.location.href = fallbackUrl; ) ), 500 )
asta pare un truc:
Funcția goBackOrClose() ( window.history.back(); window.close(); //sau dacă nu sunteți interesat să închideți fereastra, faceți altceva aici //de exemplu, theBrowserCantGoBack(); )
Apelați history.back() și apoi window.close(). Dacă browserul poate reveni în istorie, nu va putea trece la următoarea declarație. Dacă nu se poate întoarce, va închide fereastra.
Cu toate acestea, rețineți că, dacă ați ajuns la pagină prin tastarea URL-ului, atunci Firefox nu va permite scriptului să închidă fereastra.
Nu puteți verifica direct dacă butonul înapoi este disponibil. Puteți să vă uitați la history.length>0 , dar acest lucru va fi adevărat numai dacă paginile sunt înainte și pe pagina curentă. Puteți fi sigur că butonul înapoi este inutilizabil doar dacă history.length===0 .
Dacă acest lucru nu este suficient de bun, tot ce poți face este să apelezi history.back() și, dacă pagina ta este încă încărcată, butonul înapoi este gri! Desigur, asta înseamnă că, dacă butonul Înapoi este disponibil, pur și simplu ați navigat departe de pagină. Nu aveți voie să suprascrieți navigarea în onunload , așa că tot ce puteți face pentru a opri inversul este să returnați ceva de la onbeforeunload , ceea ce va face să apară un prompt enervant. Nu merită.
De fapt, de obicei este o idee foarte proastă să faci ceva cu istoria. Navigarea în istoric este pentru browserul Chrome, nu pentru pagini web. Adăugarea de link-uri „retur” provoacă, de obicei, mai multă confuzie pentru utilizatori decât merită.
Iată cum am făcut-o.
Am folosit evenimentul „beforeunload” pentru a seta valoarea booleană. Apoi am stabilit un timeout pentru a vedea dacă „înainte de descărcare” începe să ruleze.
Var $window = $(window), $trigger = $(".select_your_link"), fallback = "your_fallback_url";
areIstoria = fals; $window.on("înainte de descărcare", function())( areIstory = true; )); $trigger.on(„clic”, function())( window.history.go(-1); setTimeout(function())( if (!hasHistory)( window.location.href = fallback; ) ), 200) ; returnare fals;
Se pare că funcționează în browserele majore (testat FF, Chrome, IE11 până acum).
În proiectele mele există un fragment:
Funcția back(url) ( if (history.length > 2) ( // dacă istoricul nu este gol, mergeți înapoi: window.History.back(); ) else if (url) ( // mergeți la adresa URL de rezervă specificată: fereastră .History.replaceState(null, null, url ) else ( // mergeți acasă: window.History.replaceState(null, null, "/"); ) )
FYI: folosesc History.js pentru a gestiona istoricul browserului.
De ce să compar istoria.lungimea cu numărul 2? Pentru că pornind Pagina Chrome
este considerat primul element din istoria browserului.
- Există mai multe posibilități pentru istorie.lungime și comportamentul utilizatorului:
- Utilizatorul deschide o nouă filă de browser goală și apoi lansează pagina. history.length = 2 și dorim să dezactivăm back() în acest caz deoarece utilizatorul va merge la o filă goală.
- Utilizatorul deschide pagina într-o filă nouă făcând clic pe un link undeva înainte. history.length = 1 și din nou vrem să dezactivăm metoda back().
Și, în cele din urmă, utilizatorul ajunge la pagina curentă după mai multe reîncărcări ale paginii. history.length > 2 iar acum back() poate fi activat.
Notă: lipsesc cazul în care utilizatorul ajunge pe pagina curentă după ce face clic pe un link de pe un site extern fără target="_blank" .
Nota 2: document.referrer este gol atunci când deschideți un site web introducând adresa acestuia și, de asemenea, când site-ul folosește ajax pentru a încărca subpagini, așa că am încetat să verific această valoare în primul caz.
O soluție de lucru este să folosiți evenimentul $(window).on("beforeunload", dar nu sunt sigur că va funcționa dacă pagina este încărcată prin ajax și folosește pushState pentru a schimba istoricul ferestrei.
Așa că am folosit următoarea soluție:
Var currentUrl = window.location.href; window.history.back(); setTimeout(function())( // dacă locația nu a fost schimbată în 100 ms, atunci nu există istoric înapoi if(currentUrl === window.location.href)( // redirecționează la rădăcina site-ului window.location.href = " / "; ) ), 100);
Fiți atenți la window.history.length deoarece conține și intrări pentru window.history.forward()
Deci, puteți avea window.history.length cu mai mult de 1 intrări, dar fără intrări de istoric. Aceasta înseamnă că nu se va întâmpla nimic dacă rulați window.history.back()
Am venit cu următoarea abordare. Utilizează evenimentul onbeforeunload pentru a determina dacă browserul părăsește pagina sau nu. Dacă într-o anumită perioadă de timp nu este redirecționat către copia de rezervă.
Var goBack = function goBack(fallback)( var useFallback = true; window.addEventListener("beforeunload", function())( useFallback = false; ) setTimeout(function())(); (useFallback )( window.location.href = fallback; ) ), 100 )
Puteți apela această funcție folosind goBack("fallback.example.org") .
window.location.pathname vă va oferi URI-ul curent. De exemplu, https://domain/question/1234/i-have-a-problem va returna /question/1234/i-have-a-problem . Consultați documentația despre window.location
Apoi apelarea split() ne va oferi toate fragmentele acelui URI. deci, dacă luăm URI-ul nostru anterior, vom avea ceva de genul ["", "întrebare", "1234", "am-am-o-o problemă"] . Consultați documentația de pe String.prototype.split() pentru Informații suplimentare.
Apelul filter() aici este pentru a filtra șirul gol creat de bara oblică inversă. Va returna doar un fragment URI a cărui lungime este mai mare decât 1 (șir nevid). Deci am avea ceva de genul [„întrebare”, „1234”, „am-am-o-întrebare”] . Ar putea fi scris asa:
„utilizați strict”; window.location.pathname.split("/").filter(function(fragment) ( return fragment.length > 0; ));
Consultați documentația despre Array.prototype.filter() și scopul de destructurare pentru mai multe informații.
Acum, dacă utilizatorul încearcă să revină în timp ce este pe https://domain/ , nu vom rula instrucțiunea if și, prin urmare, nu vom apela metoda window.history.back() pentru a menține utilizatorul pe site-ul nostru. Această adresă URL va fi echivalentă cu una care are lungimea 0 și 0 > 0 este fals. În consecință, eșuează în tăcere. Desigur, puteți înregistra ceva sau puteți efectua o altă acțiune dacă doriți.
„utilizați strict”; function previousPage() ( if (window.location.pathname.split("/").filter((( length )) => length > 0).length > 0) ( window.history.back(); ) else ( alert("Nu te poți întoarce mai departe...");
RestricțiiDesigur, această soluție nu va funcționa dacă browserul nu acceptă API-ul History. Verificați documentația pentru a afla mai multe despre aceasta înainte de a utiliza această soluție.
Înainte de HTML5, singurul lucru pe care nu îl puteam controla și gestiona (fără a reîncărca conținutul sau a pirata location.hash) era istoricul unei file. Odată cu apariția API-ului de istorie HTML5, totul s-a schimbat - acum putem parcurge istoria (am putea să o facem înainte), să adăugăm elemente la istorie, să reacționăm la tranzițiile din istorie și alte lucruri utile. În acest articol, vom arunca o privire la API-ul HTML5 History și vom scrie un exemplu simplu pentru a-i ilustra capacitățile.
Concepte de bază și sintaxă API-ul History se bazează pe o singură interfață DOM - obiectul History. Fiecare filă are un obiect Istoric unic, care se află în window.history . Istoria are mai multe metode, evenimente și proprietăți pe care le putem controla din JavaScript. Fiecare pagină de filă (obiect Document) este un obiect de colecție Istoric. Fiecare element de poveste constă dintr-o adresă URL și/sau un obiect de stare și poate avea un titlu, un obiect Document, date de formular, poziția de defilare și alte informații asociate paginii.Principalele metode ale obiectului Istorie:
history.go(-2)
Pentru a adăuga elemente de istorie putem folosi history.pushState:
history.pushState((foo: „bar”), „Titlu”, „/baz.html”)
Pentru a schimba o intrare în istoric, putem folosi history.replaceState:
history.replaceState((foo: "bat"), "New Title") Exemplu live Acum cunoaștem elementele de bază, să ne uităm la un exemplu live. Vom realiza un manager de fișiere web care vă va permite să găsiți URI-ul imaginii selectate(). Managerul de fișiere folosește un simplu structura fișierului, scris în JavaScript. Când selectați un fișier sau un folder, imaginea este actualizată dinamic.
Folosim atributele data-* pentru a stoca titlul fiecărei imagini și folosim proprietatea setului de date pentru a obține acea proprietate:
Pentru ca totul să funcționeze rapid, încărcăm toate imaginile și actualizăm atributul src în mod dinamic. Această accelerare creează o problemă - rupe butonul înapoi, astfel încât să nu vă puteți deplasa înainte sau înapoi prin imagini.
Istoricul HTML5 vine în ajutor! De fiecare dată când selectăm un fișier, se creează o nouă intrare în istoric și se actualizează locația documentului (conține adresa URL unică a imaginii). Aceasta înseamnă că putem folosi butonul înapoi pentru a naviga prin imaginile noastre, în timp ce în bara de adrese vom avea un link direct către imagine pe care o putem marca sau trimite cuiva.
Cod Avem 2 dive. Unul conține structura folderului, celălalt conține imaginea curentă. Întreaga aplicație este controlată folosind JavaScript. Doar cele mai importante puncte vor fi acoperite. Exemplul de cod sursă este foarte scurt (aproximativ 80 de linii), priviți-l după ce ați citit întregul articol.Metoda bindEvents atașează handlere la evenimentul popstate, care este apelat atunci când utilizatorul navighează prin istoric și permite aplicației să-și actualizeze starea.
window.addEventListener("popstate", function(e)( self.loadImage(e.state.path, e.state.note); ), false);
Obiectul eveniment care este transmis handler-ului de evenimente popstate are o proprietate de stat - acestea sunt datele pe care le-am transmis ca prim argument pentru pushState sau replaceState.
Atașăm un handler de evenimente clic la div-ul care reprezintă structura noastră de fișiere. Folosind delegarea evenimentului, deschidem sau închidem un folder sau încărcăm o imagine (cu o intrare adăugată la istoric). Ne uităm la className al elementului părinte pentru a înțelege pe ce element am făcut clic:
- Dacă acesta este un folder, îl deschidem sau îl închidem
- Dacă este un tablou, atunci îl arătăm și adăugăm un element de poveste
Dir.addEventListener(„click”, function(e)( e.preventDefault(); var f = e.target; // Acesta este folderul dacă (f.parentNode.classList.contains(„folder”)) ( // Deschide sau închide folderul self.toggleFolders(f) // Aceasta este o imagine altfel if (f.parentNode.classList.contains("photo"))( note = f.dataset.note: f.getAttribute); ("data-notă"); // desenează imaginea self.loadImage(f.textContent, note // adaugă un element istoric history.pushState((notă: note, path:f.textContent), "", f); .textContent); ) ) , false);
Metoda care modifică conținutul unei imagini și își actualizează legenda este foarte simplă:
loadImage: function(cale, note)( img.src = cale; h2.textContent = note; )
Am primit o aplicație simplă care demonstrează capacitățile interfață actualizată Obiect de istorie. Folosim pushState pentru a adăuga elementul istoric și evenimentul popstate pentru a actualiza conținutul paginii. În plus, când facem clic pe o imagine, primim adresa ei reală în bara de adrese, pe care o putem salva sau trimite cuiva.
Safari 5+
Chrome 10+
Opera 11.5+
iOS Safari 4.2+
Android 2.2+
IE???
Lista de browsere care acceptă API-ul istoric
Până de curând, noi, dezvoltatorii, nu am putut face mare lucru cu starea și istoricul browserului. Am putea verifica numărul de articole din istoric și am putea împinge utilizatorii înainte și înapoi, dar acest lucru oferă puține beneficii utilizatorului. Odată cu creșterea paginilor web mai dinamice, avem nevoie de mai mult control. Din fericire, HTML5 ne oferă acest control prin extinderea API-ului JavaScript History.
Ce rost are?Este de la sine înțeles că adresele URL sunt importante. Ei sunt cel metoda de accesare a vastelor colecții de informații și resurse de pe web și, mai recent, acestea au început să reprezinte starea dorită a unei aplicații web. Puteți copia aceste adrese URL și le puteți partaja prietenilor dvs. sau le puteți utiliza pentru a crea link-uri din orice document HTML. Sunt venele rețelei, iar cel trebuie să fii îngrijit.
Anterior, API-ul JavaScript History oferea câteva funcționalități foarte simple:
// Verificați lungimea stivei de istoric console.log(history.length); // Trimite agent utilizator forward console.log(history.forward()); // Trimite agentul utilizator înapoi console.log(history.back()); // Trimite agentul utilizator înapoi (negativ) sau înainte (pozitiv) // printr-un număr dat de elemente console.log(history.go(-3));
Cu aplicații web Ajax dinamice, unde browserul se actualizează paginaîn unele părți, în loc să schimbi complet locația, este dificil să dai utilizatorului o adresă URL pentru a marca sau a partaja starea curentă a aplicației. Identificatorii de fragmente, cum ar fi cei utilizați în titlurile acestui articol prin atributul id, furnizează unele informații despre stare, dar depind în întregime de scripturile de la nivelul clientului.
Salvați acest fișier și deschideți-l în editorul dvs. preferat. Trebuie să fie accesat prin HTTP, așa că înseamnă că aveți nevoie fie de un server local (de exemplu, http://localhost/), fie de un web online server pe care îl puteți încărca. Vizualizarea fișierului direct folosind funcția Open File a browserului dvs. nu va funcționa, deoarece folosește protocolul file:// și nu HTTP. De asemenea, asigurați-vă că actualizați atributele href de pe fiecare dintre linkurile de navigare pentru a vă asigura că este utilizată structura corectă a directoarelor. Personal, vizionez demonstrația local la http://localhost/history.
Vom lucra exclusiv în cadrul elementului de la sfârșitul . Codul include câteva stiluri simple și modifică dinamic conținutul pe măsură ce faceți clic pe linkuri. În realitate, acesta ar putea fi încărcat de pe serverul dvs. prin XMLHttpRequest, dar în scopul acestei demonstrații l-am grupat într-un fișier autonom. Partea importantă este că avem o pagină dinamică rapidă și murdară cu care să lucrăm, așa că lăsați distracția să înceapă!
Momentan, nu există o adresă URL marcabilă pentru diferitele stări ale acestei pagini. Dacă faceți clic în jurul elementelor de navigare, apoi faceți clic pe Înapoi în browser, nu veți fi dus înapoi la starea anterioară și poate chiar fi dus de pe pagină la orice ați vizualizat înainte (în funcție de browser). Ar fi bine dacă ai putea împărtăși „Șosete” prietenilor tăi, nu? Putem face asta prin history.pushState() .
Metoda history.pushState() ia trei parametri:
Date Unele date structurate, cum ar fi setările sau conținutul, atribuite elementului istoric. titlu Numele articolului din meniul derulant istoric afișat de butoanele înapoi și înainte ale browserului. (Notă: acest lucru nu este acceptat în prezent de niciun browser major.) url(optional)
Cu acești parametri, puteți defini starea paginii, puteți da un nume acelei stări și chiar puteți furniza o adresă de marcat, ca și cum pagina s-ar fi reîncărcat în întregime. Să intrăm direct și să adăugăm asta la funcția clickHandler, chiar deasupra instrucțiunii return:
Funcția clickHandler(e) ( /* Snip... */ // Adăugați un articol în istoricul istoric history.pushState(data, event.target.textContent, event.target.href); return event.preventDefault(); )
Singura linie de cod pe care am adăugat-o informează obiectul istoric că:
- vrem să adăugăm un articol în jurnal,
- ar trebui să-și amintească datele pe care le-am încărcat deja,
- ar trebui să atribuie un nume acestei stări pe baza textului linkului pe care am făcut clic (chiar dacă acesta nu este folosit - este bine să vă obișnuiți să înregistrați un nume pentru stat) și
- ar trebui să actualizeze bara de adrese cu atributul href al acelui link.
Reîncărcați pagina în browser și faceți clic pe câteva dintre linkuri, ținând un ochi pe bara de adrese. Observați cum se schimbă la fiecare clic, în ciuda faptului că de fapt nu navigați departe de această pagină. Dacă vă uitați și la jurnalul dvs. de istorie, veți vedea o listă lungă de titluri de pagini (în acest caz „Pisici!” de neîncetat). Cu condiția ca serverul dvs. să fie configurat pentru a difuza pagina corectă la accesare, utilizatorul poate copia acea adresă URL și o poate lipi într-o nouă fereastră de browser pentru a trece direct la acel pisoi.
În acest moment, făcând clic pe butonul Înapoi, veți vedea elementele din istoric, dar pagina nu va reacționa la aceste modificări. Asta pentru că până acum am creat doar înregistrările istorice. Cum putem permite utilizatorilor activi să revină la o stare anterioară? Ascultăm evenimentul popstate.
Evenimente istorice în navigațieAgentul utilizator declanșează un eveniment popstate atunci când utilizatorul navighează prin istoricul său, fie înapoi sau înainte, cu condiția să nu îndepărteze utilizatorul de pagina curentă. Adică, toate acele pushState pe care le-am apelat vor menține utilizatorul pe pagina curentă, astfel încât evenimentul popstate se va declanșa pentru fiecare element istoric prin care trece.
Înainte de eticheta de închidere, adăugați un nou ascultător pentru evenimentul popstate:
// Reveniți la o stare salvată anterior window.addEventListener("popstate", function(event) ( console.log("popstate declanșat!"); updateContent(event.state); ));
Atașăm ascultătorul de evenimente la fereastra , care este responsabilă pentru declanșarea evenimentului și transmitem acest eveniment în handler-ul nostru. Înregistrăm un mesaj (pentru a putea vedea când se declanșează acest eveniment), apoi actualizăm conținutul folosind starea pe care am salvat-o anterior. Statul este atașat obiectului eveniment prin intermediul proprietății state.
Deschideți pagina nouă în browser, faceți clic ca înainte, apoi faceți clic înapoi. Ca și înainte, adresa URL din bara de adrese se schimbă pe măsură ce parcurgeți stările, dar acum și conținutul este restabilit la ceea ce ar trebui să fie. Faceți clic înainte și conținutul este, de asemenea, restaurat corect.
Dacă vă uitați la consola pentru dezvoltatori în Chrome când încărcați pagina pentru prima dată, veți vedea evenimentul popstate declanșat imediat, înainte de a da clic pe un link. Acest lucru se datorează faptului că Chrome consideră că încărcarea inițială a paginii este o schimbare a stării și, prin urmare, declanșează evenimentul. În acest caz, proprietatea state este null, dar, din fericire, funcția updateContent se ocupă de acest lucru. Țineți cont de acest lucru atunci când dezvoltați, deoarece vă poate prinde, mai ales dacă alte browsere își asumă acest comportament.
Rescrierea istorieiDin păcate, pe cât de fantastic este HTML5, nu ne permite să călătorim în timp real. Dacă s-ar întâmpla, m-aș întoarce în copilărie și i-aș spune unei mie mai mici: „Da, ar trebui să bei o felie de tort”. Luați asta așa cum doriți.
API-ul Istoric ne permite, totuși, să modificăm elementele din jurnalul istoric. De exemplu, am putea actualiza starea curentă ca răspuns la introducerea proaspătă a utilizatorului într-un formular. Putem face acest lucru cu history.replaceState .
replaceState funcționează la fel ca pushState, cu exact aceiași parametri, cu excepția faptului că actualizează intrarea curentă în loc să adauge una nouă. Mă pot gândi la o situație din demonstrația noastră în care aceasta ar putea fi folosită: încărcarea inițială a paginii. Dacă faceți clic înapoi suficient de mult, veți descoperi că revenirea la adresa URL inițială nu vă oferă conținutul original. Să rezolvăm asta adăugând următoarele în partea de jos a scriptului nostru:
// Stocați conținutul inițial pentru a-l putea revedea mai târziu history.replaceState(( conținut: contentEl.textContent, foto: photoEl.src ), document.title, document.location.href);
Deoarece aceasta rulează când pagina se încarcă, salvează starea inițială a paginii. Putem încărca ulterior această stare când utilizatorul navighează înapoi în acest punct prin intermediul ascultătorului de evenimente pe care l-am configurat anterior. Puteți încerca încărcând pagina, făcând clic pe câteva link-uri și apoi apăsând înapoi până când reveniți la adresa URL inițială. Conținutul inițial a revenit!
DemoAm creat o demonstrație a codului nostru completat. Am adăugat, de asemenea, puțină magie back-end pentru ca URL-urile noastre history.pushState să funcționeze ca un site real. Amintiți-vă că adresele URL pe care le introduceți ar trebui să fie adrese URL live pe care utilizatorul le poate marca și partaja ca puncte de intrare reale pe site-ul dvs.
Suport pentru browserCopiile actualizate ale Chrome (5+), Safari (5.0+), Firefox (4.0+) și Opera (11.50+) au suport pentru noul History API. Chiar și unele browsere mobile funcționează bine, cum ar fi Mobile Safari pe iOS 4+. Din păcate, IE 9 și mai jos nu au suport, dar atunci când ajunge.
Safari 5.0 prezintă uneori o ciudățenie: navigarea între stări face ca rotorul de încărcare să apară și să rămână chiar și atunci când starea a fost încărcată. Acest lucru se oprește atunci când navigați folosind un link sau o acțiune care nu implică o stare salvată de API-ul History.
PolyfillExistă un polyfill pentru API-ul History. Denumitul History.js folosește evenimentul hashchange al HTML4 cu identificatori de fragmente de document pentru a imita API-ul istoric în browserele mai vechi. Dacă una dintre adresele URL hash este utilizată de un browser modern, acesta folosește replaceState pentru a corecta în liniște adresa URL.
Sună ca o magie, dar asigurați-vă că sunteți conștient de consecințele utilizării identificatorilor de fragmente, așa cum sa menționat anterior în acest articol. Ca atare, autorul History.js a creat un ghid intitulat Intelligent State Handling.
Gânduri de închidereURL-urile depășesc doar sesiunea de navigare a unui utilizator. Sunt indicatori importanți din punct de vedere istoric pentru resurse care ar putea foarte bine să rămână în uz mulți ani de acum înainte. Înainte de a începe dezvoltarea JavaScript-ului site-ului dvs., ar trebui să vă gândiți la designul adreselor URL. Fă-le semnificative și organizate. Asigurați-vă că le puteți accesa direct fără JavaScript. Numai atunci ar trebui să adăugați JavaScript pentru a îmbunătăți experiența de navigare.
- Categorie
Literal, *tocmai* am descoperit asta și am lucrat la asta pentru un client acum două săptămâni. Chiar m-am gândit să scriu un blog despre asta din cauza cât de tare mi s-a părut asta. Acest lucru chiar poate schimba jocul.
Sunt surprins că nu ați acoperit caracteristica history.state? Cred că aceasta este specificația actuală, deși funcționează doar în Firefox. Codul folosit aici, deși funcționează, am crezut că face parte din versiunea originală a specificației. De asemenea, merită menționat că *ar trebui* să treceți în obiectul JavaScript ca în exemplul dvs. Blogul Microsoft IE are exemple în care este transmis un șir. Nu am testat suportul pentru acest lucru în browsere, dar merită menționat.
Practic, nu vă pot spune câte ore s-a dovedit a fi o problemă pentru mine întreaga problemă „Stocați conținutul inițial pentru a-l putea revizui mai târziu”. Mi se pare neintuitiv faptul că starea implicită la care ajungeți nu este în stiva de istorie.
Încerc pagina demo pe Internet Explorer 9 și nu pot face nicio diferență față de Chrome, așa că pare să funcționeze.
Voi folosi acest articol pentru un proiect viitor, cu siguranță. Multumesc!
mulțumesc pentru împărtășirea experienței tale, foarte informativ.
Ați putea, vă rog, să detaliați ce ați făcut pe server pentru a gestiona adresele URL false? Sunt redirecționări manuale pe care le-ai introdus sau rescrieri automate? Cum se convertesc?
Multumesc mult!
Între timp, am avansat puțin pe același subiect. Dacă serverul dvs. web este Apache, îl puteți configura să utilizeze mod_rewrite, care permite să convertiți adresele URL tastate de utilizator (sau crawler) în alte adrese URL de pe partea serverului:
Acest lucru se face prin adăugarea unui număr de reguli în .htaccess la rădăcina site-ului dvs. web.
Literal, tocmai am lansat noul meu site care folosește această tehnică. Funcționează frumos!
Este plăcut să (poate) să reușiți să eliminați hash-urile și hashbang-urile pe viitoarele site-uri bazate pe ajax.
Aștept cu nerăbdare să văd cum se folosește acest lucru pe măsură ce este adoptat mai pe scară largă.
Singurele probleme apar (cum este adesea cazul) cu implementările pe mai multe browsere ale acestui lucru. API-ul istoric poate fi acceptat de browserele pe care le-ați menționat, dar cu diferite grade de succes.
Consultați History.js (notați „H” majuscul) de Ben Lupton aici: https://github.com/balupton/History.js/ care oferă o modalitate de a utiliza stările istoricului HTML5 în timp ce ține cont de inconsecvențele browserului craoos.
Din nou, minunat articol. Se reduce cu adevărat la principiile de bază.
Acest lucru este grozav, dar dacă nu funcționează pe IE9 sau mai jos, este destul de inutil pentru site-urile de producție în prezent (fără multe hack-uri și alternative dezordonate!)
@Raphael+Eric:
Îmi cer scuze pentru răspunsul târziu! În scopul demo-ului, am folosit o configurație de bază mod_rewrite și PHP.
RewriteRule ^(pufoși|șosete|muști|bob)$ index.php?p=$1
Regula de rescrire de mai sus maschează adresele URL demo și le trece într-un singur fișier PHP cu un șir de interogare a pisicii pe care utilizatorul încearcă să vadă. Fișierul PHP verifică apoi că $_GET["p"] este valid (igienizați-vă întotdeauna și verificați intrarea dvs. după caz), apoi folosind variabilele predefinite pe care le-am setat pentru acea pisică.
Dacă aceasta ar fi o aplicație reală, calea solicitată ar putea fi folosită pentru a construi interogări de baze de date (igienizate, desigur) pentru a atrage conținut mai dinamic. CMS precum WordPress utilizează ceva de genul acesta pentru implementarea lor „URL curat”.
Sper că acest lucru ajută.
Ar fi posibil să vezi acel fișier htaccess mai aproape. Înțeleg tot ce se întâmplă aici, în partea istorică api, cu excepția mod_rewrite. Chiar aveți mai multe pagini care trăiesc undeva pentru fiecare dintre aceste pisici diferite? Reîmprospătarea paginii după ce faceți clic pe câteva dintre pisici returnează o eroare de pagină negăsită. Asta are de-a face cu partea htaccess care îmi lipsește, nu? Mulţumesc.
În ciuda comentariului meu de mai sus despre compatibilitatea slabă a browserului, am decis să trec de la URL-urile hashing (/#/slug) la istoricul HTML5 pentru http://goproheroes.com și am decis să mă întorc la încărcarea normală a paginii pentru IE9 și mai jos folosind:
funcția supports_history_api() (
return !!(window.history && history.pushState);
}
Mulțumesc Mike, demonstrația ta m-a ajutat. Am avut încercarea mea ceva mai complicată decât trebuia.
Cu toate acestea, încerc să urmăresc și să detectez când utilizatorul trece înainte și înapoi prin istoric, astfel încât să pot adăuga tranziții corespunzătoare la pagina mea. Din păcate, API-ul istoric nu vă informează dacă a fost făcut clic pe un buton înainte sau înapoi pe un eveniment popstate. Asta ar fi foarte util.
Mă gândesc că un cookie ar putea fi singura modalitate de a încerca să urmăresc comanda. Salvarea unei variabile anterioare în obiectul de stare a complicat lucrurile și a cauzat probleme de browser.
Adăugând la listă,
Multumesc Mike!
Acei pisicuțe adorabili m-au ajutat să configurez câteva funcții de împingere și popping pe noua versiune a site-ului meu care va fi lansată în curând!
Multumesc pentru tut!
În funcția ta clickhandler ai ceva în neregulă în codul tău poștal (este ok totuși pe kittieland):
1. Obiectul eveniment este declarat pe argumente ca „e”, nu „eveniment”.
2. Nu există updateContent(); oriunde! A trebuit să verific sursa ta de lucru pentru a vedea dacă am făcut ceva greșit.
Dar stai, sunt mai multe! ...si unele actualizări:
3. Chrome 19+ începe să se amestece cu proprietatea de stat a evenimentului și a altor lucruri.
Ca un sfat: am folosit un setTimeout() șchiopăt pentru a lega ascultătorul de evenimente pentru a sări peste nerăbdarea Chrome de a-și afișa starea.
