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

60
ajax fragment-identifier hashchange javascript navigation

7 ответов

использовать событие jQuery hashchange плагин. Что касается вашей полной навигации 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
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. Это не быстрый ответ, и его нет, поэтому вам нужно будет подумать об этом и передать разумные args hashQuery (т. е. a=1&b=2) в changeHashValue (hashQuery), а затем обслуживать каждую комбинацию указанных args в вашем обратном вызове 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