Обнаружение кнопки «Назад» / изменения хэша в 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? Когда я пробовал их с тайм-аутом .2 и 1 секунда, он привязывал мой процессор.

Answer 1

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

В мире 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));
});

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

Answer 2

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

Answer 3

jQuery BBQ (кнопка "Назад" и библиотека запросов)

Высококачественный плагин для истории браузера на основе хеша и очень обновленный (26 января 2010 г.) на момент написания статьи (jQuery 1.4.1) .

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

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

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

Answer 6

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

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

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

Answer 7

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

// 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();