Обнаружение Назад Кнопка / Hash изменение URL

голоса
60

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

Задан 06/10/2008 в 02:18
источник пользователем
На других языках...                            


7 ответов

голоса
44

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

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

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

Ответил 06/12/2012 в 16:49
источник пользователем

голоса
32

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

Ответил 06/10/2008 в 03:46
источник пользователем

голоса
12

JQuery BBQ (Back Button & Library Query)

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

Ответил 03/02/2010 в 17:42
источник пользователем

голоса
10

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

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

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

Ответил 30/01/2011 в 15:02
источник пользователем

голоса
2

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

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

Ответил 28/08/2010 в 18:47
источник пользователем

голоса
1

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

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

Path.map("#/page").to(function(){
    alert('page!');
});
Ответил 19/04/2012 в 19:16
источник пользователем

голоса
1

Я делаю следующее, если вы хотите использовать его затем вставить его в какой-нибудь, где и установить свой код обработчика в locationHashChanged (СМО), где комментировал, а затем вызвать changeHashValue (hashQuery) каждый раз, когда вы загружаете запрос Ajax. Ее не быстро исправить ответ, и их нет, так что вам нужно будет думать об этом и передать осмысленные hashQuery арг (т.е. = 1 & Ь = 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();
Ответил 18/04/2011 в 20:53
источник пользователем

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more