Eine Sache die mich jeher an vielen Seiten stört die JavaScript-Funktionen nutzen ist, dass sie selten Permalink-Tauglich programmiert werden.

Ein Beispiel: Viele Webseiten setzen seit geraumer Zeit auf sogenannte Accordions um viele Inhalte auf wenig Platz darzustellen. Das Problem was diese Dinger jedoch oft haben ist, das ich keinen Link generieren kann der dem Empfänger genau das zeigt was ich ihm hier evtl. zeigen wollte.

Eventuell möchte ich mein Gegenüber mit einem Link genau auf eine meiner Referenzen hinweisen die ich eben mittels eines Accordions dargestellt habe. Bei den meisten Webseiten endet das dann mit Aussagen wie:

Hier der Link zu meinen Referenzen:
http://meinedomain.de/referenzen.html
Bitte scrollen Sie doch bis ans Ende des aufklappbaren Menüs und klicken Sie dann auf den Eintrag “Musterfirma”.

Das ist weder Zugänglich, noch benutzerfreundlich! Dabei wäre es mit Ankern doch so einfach! Wäre es nicht schön dem Kunden einfach eine URL wie z.B. http://meinedomain.de/referenzen.html#musterfirma zuzuschicken, und sobald sich die Seite lädt springt sein Browser direkt zu dem gewolltem Eintrag und blendet den besagten Punkt im Accordion automatisch ein? Natürlich wäre es das ;)

Dabei ist es doch so einfach! JavaScript schleppt mittels location.hash ständig den aktuellen Anker der URL mit sich herum, und diese Variable können wir natürlich auch super in unseren Applikationen verwenden.

In besagtem Beispiel wird bei einem Klick auf den Accordion-Eintrag automatisch eine eindeutige ID als Anker an die URL gehangen. Kopiert ein Nutzer nun die URL aus der Adressleiste, und schickt diese z.B. einem Bekannten, so können wir später wieder genau nachvollziehen welche Inhalte der Besucher zeigen wollte.

Wir können also in unserem JavaScript bei jedem Seitenaufruf prüfen welcher Anker gesetzt wurde, und aufgrund dessen direkt den gewünschten Inhalt einblenden. Ob dies nun eine dynamische Bildergalerie, ein Accordion, oder ein Seite mit dynamischen Tabs ist spielt dabei keine Rolle.

Das einzige Problem an der Sache ist jedoch, das in der Variable auch immer die Raute enthalten ist, die wir aber unter Umständen für unsere Scripte gar nicht benötigen. Daher hier eine kleine Funktion die location.hash von der Raute bereinigt.

function getHash() {
	var hash = location.hash;
	hash = hash.replace(/^.*#/, '');
	return (hash);
}

Ein beispielhaftes Script was eben sehr konsequent mit location.hash arbeitet ist das jQuery-Plugin Galleriffic:“http://www.twospy.com/galleriffic/. Hier kann ich meinem Gegenüber einen Directlink zu einem Bild schicken, was dem anderem auch direkt zum Start geladen wird. Damit ist das Plugin natürlich auch wunderbar zum lernen prädestiniert. Leider sind viele andere Plugins (wie z.B. auch das oben genannte Accordion) noch nicht auf diesem Stand angelangt.

Also: Setzt in zukünftigen Scripten möglichst auf location.hash, eure Kunden bzw. Besucher werden es euch danken.



Kommentare zum Thema Permalinks/Directlinks trotz JavaScript/Ajax:

1 | wheely schrieb am 23.10.2008 um 20:54
Gravatar dieses Kommentators

Ja, das habe ich auch schonmal so eingesetzt (florianwilkes.net/musik/discography).
Aber ein Problem gibt es jetzt bei der Art: drückt man den zurück-Button passiert nichts, bis man nicht die gesamte Seite wechselt.
Hast du ne Idee, wie man quasi überwachen kann, ob die history verwendet wird?

2 | Christian schrieb am 23.10.2008 um 21:00
Gravatar dieses Kommentators

@wheely Ich muss zugeben das ich es noch nie ausprobiert habe, aber in jQuery würde ich es wohl mit dem Change-Event probieren, also Quasi

$(location.hash).change(function(){
	//Do Something
});

Doch ich denke da das kein wirkliches DOM-Element ist wird das wohl nicht gehen ;)

Ansonsten evtl. location.replace womit du History-Einträge manipulieren kannst?

3 | Arne schrieb am 25.10.2008 um 18:55
Gravatar dieses Kommentators

Danke Christian, für diesen Tipp. Klingt auf jeden Fall äusserst praktikabel :-)

4 | User schrieb am 28.09.2009 um 22:59
Gravatar dieses Kommentators

ich würde location.hash.slice(1) benutzen. Ich würde behaupten, das geht schneller als .replace().

Kommentar-Feed für diesen Artikel


Kommentarfunktion für diesen Artikel geschlossen.



Blogsuche

RSS-Feeds

Plaste & Plastik

plasteundplastik.de - Das Geocaching-Weblog

Die Kategorien


Netz-Fundstücke


Meta / Propaganda