Обнаружение кнопки «Назад»/«Хэш» в URL-адресе

Question

Я только что установил свою новую домашнюю страницу по адресу http://ritter.vg. Я использую jQuery, но очень минимально.
Он загружает все страницы с помощью AJAX - я настроил его для создания закладки, обнаружив хэш в 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'); 

Но я не могу вернуть назад и вперед кнопки для работы.

Есть ли способ обнаружить, когда нажата кнопка «Назад» (или определить, когда изменяется хеш), без использования цикла setInterval? Когда я пробовал те, у которых время ожидания 0,2 и 1 секунда, оно привязывало мой процессор.

Answer 1

Используйте вместо этого плагин jQuery hashchange event. Что касается вашей полной навигации ajax, попробуйте иметь SEO friendly ajax. В противном случае ваши страницы ничего не отображали в браузерах с ограничениями JavaScript.

Answer 2

jQuery BBQ (Back Button & Query Library)

Высокое качество хэш на основе истории браузера плагин и очень up-to-date (Jan 26, 2010) as of this writing (jQuery 1.4.1).

Answer 3

Еще одна отличная реализация - это jQuery History пользователя balupton, который будет использовать собственное событие onhashchange, если он поддерживается браузером, если он не будет использовать iframe или интервал для браузера, чтобы обеспечить успешную эмулировку всех ожидаемых функциональных возможностей. Он также обеспечивает хороший интерфейс для привязки к определенным состояниям.

Еще один заслуживающий внимания проект - это jQuery Ajaxy, который в значительной степени является расширением для истории jQuery, чтобы добавить ajax в микс. Когда вы начинаете использовать ajax с хэшами, получите quite complicated!

Answer 4

HTML5 содержит гораздо лучшее решение, чем использование hashchange, которое является API управления состоянием HTML5 - https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history - они позволяют изменять URL страницы без использования хэшей!

Хотя функциональность состояния HTML5 доступна только для браузеров HTML5. Поэтому вы, вероятно, захотите использовать что-то вроде History.js, которое обеспечивает обратную совместимость с браузерами HTML4 (через хеширование, но все же поддерживает данные и названия, а также функции replaceState).

Вы можете прочитать об этом здесь: https://github.com/browserstate/History.js

Answer 5

я делаю следующее, если вы хотите использовать его затем вставить его в каком-то где и установить свой код обработчика в locationHashChanged (СМО), где комментировал, а затем вызовите changeHashValue (hashQuery) каждый раз, когда вы загружаете запрос ajax. Это не быстрый ответ, и его нет, поэтому вам нужно будет подумать об этом и передать разумные аргументы hashQuery (т.е. a = 1 & b = 2), чтобы изменитьHashValue (hashQuery), а затем обслуживать каждую комбинацию упомянутых аргументов в вашем locationHashChanged (СМО) обратного вызова ...

// 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

Попробуйте простой & легкий PathJS LIB.

Простой пример:

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

Answer 7

Ответы здесь все довольно старые.

В мире HTML5 вы должны использовать событие onpopstate.

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

Или:

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

Последний фрагмент кода позволяет использовать несколько обработчиков событий существовать, в то время как бывший заменит любой существующий обработчик, который может вызвать труднодоступные найти ошибки.