Detectando o botão traseiro / Alterar Hash na URL

Question

Eu apenas configurar minha nova homepage em http://ritter.vg . Eu estou usando jQuery, mas muito minimamente.
Ele carrega todas as páginas usando AJAX - eu tê-lo configurado para permitir bookmarking detectando o hash no 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');

Mas eu não posso pegar as costas e botões de avançar ao trabalho.

Existe uma maneira de detectar quando o botão de volta foi pressionada (ou detectar quando as mudanças de hash) sem usar um loop setInterval? Quando eu tentei aqueles com .2 e 1 timeouts segundo lugar, atrelada a minha CPU.

Answer 1

Use a jQuery evento hashchange do plugin em seu lugar. Quanto à sua navegação ajax completo, tentar ter SEO amigável ajax . Caso contrário suas páginas mostrado nada em navegadores com limitações de JavaScript.

Answer 2

As respostas aqui são todos muito antigo.

No mundo do HTML5, você deve o uso onpopstate evento.

window.onpopstate = function(event)
{
    alert("location: " + document.location + ", state: " + JSON.stringify(event.state));
};

Ou:

window.addEventListener('popstate', function(event)
{
    alert("location: " + document.location + ", state: " + JSON.stringify(event.state));
});

O último trecho permite a existir vários identificadores de eventos, enquanto o primeiro vai substituir qualquer manipulador existente, que pode causar erros difíceis de encontrar.

Answer 3

jQuery BBQ (Back Button & biblioteca de consulta)

A baseado em hash de alta qualidade histórico do navegador plugin e muito up-to-date (26 de janeiro de 2010) como esta escrito (jQuery 1.4.1) .

Answer 4

HTML5 incluiu uma solução muito melhor do que usar hashchange que é o HTML5 Gerenciamento de Estado APIs - https: //developer.mozilla.org/en/DOM/Manipulating_the_browser_history - eles permitem que você alterar a URL da página, sem a necessidade de hashes de uso

!

Embora o HTML5 Estado funcionalidade está disponível apenas para HTML5 navegadores. Então você provavelmente vai querer usar algo como History.js que proporciona uma experiência para trás compatível com HTML4 Browsers ( via hashes, mas ainda oferece suporte a dados e títulos, bem como a funcionalidade replaceState).

Você pode ler mais sobre ele aqui: https://github.com/browserstate/History.js

Answer 5

Outra grande aplicação é de balupton História jQuery que irá usar o evento onhashchange nativa se é suportado pelo navegador, se não ele vai usar um iframe ou intervalo de forma adequada para o navegador para assegurar todas as funcionalidades esperadas é emulado com sucesso. Ele também fornece uma interface agradável para se ligam a determinados estados.

Outra pena projeto observando bem é jQuery AJAXy que é praticamente uma extensão para jQuery história para adicionar ajax à mistura. Como quando você começar a usar ajax com hashes-lo ficar de bastante complicado !

Answer 6

I fazer o seguinte, se você quiser usá-lo, em seguida, colá-lo em algum lugar e definir o seu código do manipulador no locationHashChanged (QS), onde comentou, e depois chamar changeHashValue (hashQuery) a cada vez que você carregar uma solicitação ajax. A sua não é uma resposta de correção rápida e não há nenhum, então você terá que pensar sobre isso e passar args hashQuery sensíveis (ou seja, a = 1 & b = 2) para changeHashValue (hashQuery) e, em seguida, atender a cada combinação das referidas args em sua locationHashChanged (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();

Answer 7

Tente simples e leve PathJS lib.

Um exemplo simples:

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