[JavaScript] Wie kann man auf verschiedene Anker # in der URL reagieren?

Spo0n22 · 12. Oktober 2010

Wie kann man auf verschiedene Anker # in der URL reagieren?

Hallo Leute,

seit neuestem sehe ich auf vielen Seiten folgende Programmierung in der Url,
mich würde interessieren um was es sich da handelt.

Twitter

/#!/messages

http://www.facebook.com

/#!/profile.php?id=xxxxxxxxx

Danke schonmal

Anzeige

Nanobyte · 12. Oktober 2010

AW: Welche Programmierung

Es handelt sich dabei um Javascript mit Ajax Requests.

Die # sorgt dafür das die Seite nicht Neugeladen wird, das wird dann von Javascript und Ajax übernommen. Somit entfällt viel Traffic.

Murdoc · 12. Oktober 2010

AW: Welche Programmierung

vielleicht interessiert es den einen oder anderen, deswegen erklär ich euch kurz wie man damit arbeitet.

zuerst ist es wichtig zu wissen, dass alles nach "#" nicht den client verlässt. also von "#!/messages" bekommt der server nichts mit, weil dieser part einen anker im in der aktuellen seite referenziert. dieser teil ist eigl. dafür vorgesehen zu einem bestimmten link im dokument zu springen, kann aber auch für andere sachen "missbraucht" werden.

auf diesen teil der URI kann man in javascript mit der "hash" eigenschaft in window.location zugreifen:

Code:

alert(window.location.hash); // #!/messages

aber wie fängt man eine änderung mit javascript ab? man muss ja darauf reagieren können um diese zu verarbeiten.

in den aktuellen browsern reicht es den event "hashchange" abzufangen. dieser event kam mit der HTML5-spezifikation dazu, ist also noch ziemlich neu und wirklich nur in aktuellen browsern zu finden:
- IE8+,
- FF 3.6+,
- WebKit 528+ (bei Chrome und Safari einfach mal den user-agent checken, da steht die webkit-version drin)

Code:

window.addEventListener("hashchange", function() { mach_was(); }, false);

// ie8
window.attachEvent("onhashchange", function() { mach_was(); }, false);

für ältere browser kann man hierfür entweder mit einem interval arbeiten, welcher ständig prüft ob der aktuelle hash sich geändert hat, oder einen workaround schreiben.

der mir bekannte workaround funktioniert aber nur, wenn alle möglichen hashes zuvor bekannt sind.

hier könnt ihr selbst mal nachlesen wie das ganze funktioniert: Emulating onhashchange without setInterval - Ajaxian

wer keine lust hat sich mit einem workaround auseinander zu setzen, der kann auch auf ein framework zurückgreifen. folgende (mir bekannte) frameworks haben einen workaround implementiert:
- jQuery
- MooTools

für prototype steht bisher keine implementierung zur verfügung, also einfach auf prototype 1.7 warten hoffen oder selbst was schreiben.

wenn ihr folgenden code in eurer webseite verwendet, würd ich euch bitten mich als autor zu erwähnen.

Code:

// hashchange prototype-support 
// @author murdoc <https://raidrush.net/members/18622/ // @see <https://raidrush.net/threads/javascript-wie-kann-man-auf-verschiedene-anker-in-der-url-reagieren.745629/ (function() {
 function _fire() {
 document.fire("html5:hashchange");
 }
 
 if("onhashchange" in window) {
 Event.observe(window, "hashchange", _fire);
 return;
 }
 
 var hash;
 
 function _checkHash() {
 if(hash != window.location.hash) {
 hash = window.location.hash;
 _fire();
 }
 }
 
 function _observe() {
 _checkHash();
 _observe.delay(1);
 }
 
 _observe();
})();

Code:

document.observe("html5:hashchange", function() { mach_was(); });

Spo0n22 · 12. Oktober 2010

AW: Wie kann man auf verschiedene Anker # in der URL reagieren?

Das wollte ich als nächstet Fragen :lol:
Wie man dies anwenden kann.

Wenn ich jetzt diesen Code verwende wie ist es mit den Urls? Muss dort etwas bestimmtes angegeben werden?

Und wie wird herraus gefunden was in den Content geladen werden soll?

Mfg

Murdoc · 12. Oktober 2010

AW: Wie kann man auf verschiedene Anker # in der URL reagieren?

das geht nicht "einfachso" und einen standard gibts auch nicht.

du musst javascript und etwas serverseitiges (php z.b.) beherschen um derartiges umzusetzen.

Nützliche Suchen

[JavaScript] Wie kann man auf verschiedene Anker # in der URL reagieren?

Videos zum Themenbereich