Erkennen Zurück-Taste / Hash Änderung URL

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

Frage

Ich habe gerade meine neue Homepage oben unter http://ritter.vg . Ich bin mit jQuery, aber sehr minimal.
Er lädt alle Seiten mit AJAX - ich habe es bis bookmarking zu ermöglichen, indem der Hash in der URL zu erkennen. 

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

Aber ich kann die Zurück- und Vorwärts-Tasten arbeiten nicht bekommen.

Gibt es eine Möglichkeit zu erkennen, wenn die Rücktaste (oder zu erkennen, wenn die Hash-Änderungen) gedrückt wurde, ohne eine setInterval-Schleife? Wenn ich die mit 0,2 und 1 Sekunde Timeouts versucht, verdübelt es meine CPU.

War es hilfreich?

Lösung

Mit dem jQuery hashchange Ereignisse statt Plugin. In Bezug auf Ihre vollständige Ajax-Navigation, versuchen SEO freundliche Ajax haben. Ansonsten Ihre Seiten nichts in Browsern mit JavaScript Einschränkungen gezeigt.

Andere Tipps

Die Antworten hier sind alle recht alt.

In der HTML5 Welt, sollten Sie die Verwendung onpopstate Ereignis. 

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

Oder: 

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

Dieser Code-Schnipsel können mehrere Event-Handler existieren, während die frühere alle vorhandenen Handler ersetzen wird, die schwer zu findende Fehler verursachen können.

HTML5 hat eine viel bessere Lösung enthält als hashchange verwendet, die den HTML5-State-Management-APIs ist - https: //developer.mozilla.org/en/DOM/Manipulating_the_browser_history - sie können Sie die uRL der Seite ändern, ohne dass Hashes verwenden,

!

Obwohl die HTML5 Staat Funktionalität nur für HTML5-Browser ist. So möchten Sie wahrscheinlich etwas verwenden, wie history.js , die eine rückwärtskompatibel Erfahrung zu HTML4-Browser bietet ( über Hashes, unterstützt aber noch Daten und Titel sowie die replaceState Funktionalität).

Sie können mehr darüber lesen Sie hier: https://github.com/browserstate/History.js

Eine weitere große Implementierung ist balupton jQuery Geschichte , die das native onhashchange Ereignis verwenden, wenn es sich um vom Browser unterstützt, wenn nicht wird es ein iframe verwenden oder in geeigneter Weise für den Browser alle die erwartete Funktionalität zu gewährleisten, erfolgreich emuliert Intervall. Es bietet auch eine schöne Oberfläche zu bestimmten Staaten zu binden.

Ein weiteres Projekt auch erwähnenswert, ist jQuery Ajaxy das ist so ziemlich eine Erweiterung für jQuery aJAX auf die Mischung hinzufügen. Wie, wenn Sie es ziemlich kompliziert

ich die folgende, wenn Sie es verwenden möchten, dann fügen Sie ihn in einigen, wo und stellen Sie Ihren Handler-Code in locationHashChanged (qs), wo kommentiert und dann changeHashValue (hashQuery) rufen jedes Mal, wenn Sie eine Ajax-Anfrage laden. Es ist keine Hauruck-Antwort, und es gibt keine, so dass Sie darüber nachdenken müssen und vernünftige hashQuery args passieren (dh a = 1 & b = 2) zu changeHashValue (hashQuery) und dann für jede Kombination sorgt der args in Ihrem locationHashChanged (qs) Rückruf ... 

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

Versuchen Sie einfach und leichte Bauweise PathJS lib.

Einfaches Beispiel: 

Path.map("#/page").to(function(){
    alert('page!');
});
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top