Wykrywanie przycisku Wstecz/Zawieszanie Zmiana adresu URL

Question

Właśnie skonfigurowałem nową stronę główną pod numerem http://ritter.vg. Używam jQuery, ale bardzo minimalnie.
Ładuje wszystkie strony za pomocą AJAX - mam to skonfigurowane, aby umożliwić zakładki przez wykrycie wartości mieszania w adresie URL.

//general functions 
function getUrl(u) { 
     return u + '.html'; 
} 
function loadURL(u) { 
     $.get(getUrl(u), function(r){ 
       $('#main').html(r); 
      } 
    ); 
} 
//allows bookmarking 
var hash = new String(document.location).indexOf("#"); 
if(hash > 0) 
{ 
     page = new String(document.location).substring(hash + 1); 
     if(page.length > 1) 
     loadURL(page); 
     else 
     loadURL('news'); 
} 
else 
     loadURL('news'); 

Ale nie mogę uzyskać przycisków powrotu i przewijania do przodu.

Czy istnieje sposób wykrywania naciśnięcia przycisku Wstecz (lub wykrywania zmiany hasza) bez użycia pętli setInterval? Kiedy wypróbowałem tych z limitami czasu .2 i 1 sekundą, ustawił mój procesor.

Answer 1

Zamiast tego użyj wtyczki jQuery hashchange event. Jeśli chodzi o pełną nawigację ajax, spróbuj mieć SEO friendly ajax. W przeciwnym razie Twoje strony nie wyświetlają się w przeglądarkach z ograniczeniami JavaScript.

Answer 2

jQuery BBQ (Back Button & Query Library)

wysokiej jakości hash oparte Wtyczka historii przeglądarki i bardzo up-to-date (Jan 26, 2010) as of this writing (jQuery 1.4.1).

Answer 3

Kolejną wielką implementacją jest balupton jQuery History, który użyje natywnego zdarzenia onhashchange, jeśli jest obsługiwany przez przeglądarkę, jeśli nie, użyje odpowiednio iframe lub interwału dla przeglądarki, aby upewnić się, że wszystkie oczekiwane funkcje zostały pomyślnie emulowane. Zapewnia również przyjemny interfejs do łączenia się z określonymi stanami.

Innym projektem wartym odnotowania jest również jQuery Ajaxy, które jest prawie rozszerzeniem dla historii jQuery, aby dodać ajax do miksu. Kiedy zaczniesz używać ajaxa z hasłami, otrzymasz quite complicated!

Answer 4

HTML5 zawiera znacznie lepsze rozwiązanie niż przy użyciu funkcji wymiany, która jest interfejsami API zarządzania stanem HTML5 - https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history - umożliwiają one zmianę adresu strony bez używania skrótów!

Chociaż funkcja stanu HTML5 jest dostępna tylko dla przeglądarek HTML5. Prawdopodobnie chcesz użyć czegoś takiego jak History.js, które zapewnia kompatybilność wsteczną z przeglądarkami HTML4 (za pośrednictwem skrótów, ale nadal obsługuje dane i tytuły, a także funkcjonalność replaceState).

Możesz przeczytać więcej na ten temat tutaj: https://github.com/browserstate/History.js

Answer 5

I wykonaj następujące czynności, jeśli chcesz go używać, a następnie wkleić go w pewien gdzie i ustawić kod obsługi w locationHashChanged (Qs), gdzie komentuje, a następnie wywołanie changeHashValue (hashQuery) przy każdym ładowaniu zapytania ajax. Nie jest to szybka odpowiedź i nie ma jej, więc musisz się nad tym zastanowić i podać rozsądne argumenty hashQuery (tj. A = 1 & b = 2), aby zmienić wartośćHashValue (hashQuery), a następnie uwzględnić każdą kombinację wymienionych argumentów. w locationHashChanged (qs) zwrotnego ...

// Add code below ... 
function locationHashChanged(qs) 
{ 
    var q = parseQs(qs); 
    // ADD SOME CODE HERE TO LOAD YOUR PAGE ELEMS AS PER q !! 
    // YOU SHOULD CATER FOR EACH hashQuery ATTRS COMBINATION 
    // THAT IS PASSED TO changeHashValue(hashQuery) 
} 

// CALL THIS FROM YOUR AJAX LOAD CODE EACH LOAD ... 
function changeHashValue(hashQuery) 
{ 
    stopHashListener(); 
    hashValue  = hashQuery; 
    location.hash = hashQuery; 
    startHashListener(); 
} 

// AND DONT WORRY ABOUT ANYTHING BELOW ... 
function checkIfHashChanged() 
{ 
    var hashQuery = getHashQuery(); 
    if (hashQuery == hashValue) 
    return; 
    hashValue = hashQuery; 
    locationHashChanged(hashQuery); 
} 

function parseQs(qs) 
{ 
    var q = {}; 
    var pairs = qs.split('&'); 
    for (var idx in pairs) { 
    var arg = pairs[idx].split('='); 
    q[arg[0]] = arg[1]; 
    } 
    return q; 
} 

function startHashListener() 
{ 
    hashListener = setInterval(checkIfHashChanged, 1000); 
} 

function stopHashListener() 
{ 
    if (hashListener != null) 
    clearInterval(hashListener); 
    hashListener = null; 
} 

function getHashQuery() 
{ 
    return location.hash.replace(/^#/, ''); 
} 

var hashListener = null; 
var hashValue = '';//getHashQuery(); 
startHashListener(); 

Answer 6

Wypróbuj prosty & lekką PathJS lib.

Prosty przykład:

Path.map("#/page").to(function(){ 
    alert('page!'); 
}); 

Answer 7

Tutejsze odpowiedzi są dość stare.

W świecie HTML5 należy użyć zdarzenia onpopstate.

window.onpopstate = function(event) 
{ 
    alert("location: " + document.location + ", state: " + JSON.stringify(event.state)); 
}; 

Lub:

window.addEventListener('popstate', function(event) 
{ 
    alert("location: " + document.location + ", state: " + JSON.stringify(event.state)); 
}); 

Ten ostatni fragment pozwala wielu obsługi zdarzeń istnieć, podczas gdy pierwsza zastąpi istniejący program obsługi, który może powodować trudne do znalezienia błędy.