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

StackOverflow https://stackoverflow.com/questions/172957

Вопрос

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

Это было полезно?

Решение

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

Другие советы

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

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

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

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

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

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

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

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

Я делаю следующее: если вы хотите использовать его, вставьте его в какое-то место и установите код обработчика в locationHashChanged (qs), где комментируется, а затем вызывайте changeHashValue (hashQuery) каждый раз, когда вы загружаете запрос ajax. Это не быстрый ответ, и его нет, поэтому вам нужно подумать об этом и передать разумные аргументы hashQuery (то есть a = 1 & amp; 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();

Попробуйте просто & amp; облегченный PathJS lib.

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

Path.map("#/page").to(function(){
    alert('page!');
});
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top