Обнаружение кнопки "Назад" / изменения хэша в URL-адресе

Я просто настроил свою новую домашнюю страницу на 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 второй тайм-аут, он привязал мой процессор.

7 60
javascript uinavigationcontroller ajax fragment-identifier hashchange

7 ответов:

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

32

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

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

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

45

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

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

12

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

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

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

10

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

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

2

Я делаю следующее, Если вы хотите использовать его, вставьте его в некоторые места и установите код обработчика в 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();
1

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

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

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