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

ОТВЕТЫ

Ответ 1

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

Ответ 2

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

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

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

Ответ 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

Ответ 5

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

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

Ответ 6

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

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

Ответ 7

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

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

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