2013-02-20 15 views
22

Ich arbeite an einer einfachen Anwendung, die auf einer Seite basiert (aufgrund von Projekteinschränkungen) und dynamischen Inhalt hat. Ich verstehe den dynamischen Inhalt gut, aber was ich nicht verstehe, ist, wie man ein Skript einrichtet, das den HTML-Code eines div ändert, wenn sich der Hash-Wert in der URL ändert.Erkennen von Änderungen im Hash-Wert der URL mit JavaScript

Ich brauche ein Skript JavaScript als solche zu arbeiten:

Url: http://foo.com/foo.html div Inhalt: <h1>Hello World</h1>

Url: http://foo.com/foo.html#foo div Inhalt: <h1>Foo</h1>

Wie würde das funktionieren?

Bitte helfen! Vielen Dank.

+0

Werfen Sie einen Blick auf [sammy] (https://github.com/quirkey/sammy):

<script src="/path/to/jquery.js"></script> <script src="/path/to/sammy.js"></script> <script> $(function(){ // Use sammy to detect hash changes $.sammy(function(){ // bind to #:page where :page can be some value // we're expecting and can be retrieved with this.params this.get('#:page',function(){ // load some page using ajax in to an simple container $('#container').load('/partial/'+this.params['page']+'.html'); }); }).run(); }); </script> <a href="#foo">Load foo.html</a> <a href="#bar">Load bar.html</a> 

Ein Beispiel ist hier zu finden. –

+0

@Bradchristie ok, ich werde einen Blick werfen, aber idealerweise möchte ich Plugins viel vermeiden vermeiden ... ist es möglich, nur mit jQuery? – user115422

+0

Schauen wir uns das realistisch an. Entweder verbringst du die zusätzliche Zeit damit, etwas zu schreiben, das tut, was eine Bibliothek tut, oder du benutzt einfach die Bibliothek und gehst weiter. Sie verwenden bereits jQuery (eine Bibliothek), weil Sie vermutlich die Flexibilität haben wollen und nicht selbst schreiben müssen. Plus Sammy können Sie Platzhalter einfügen und Vorlage der eingehenden Hash (sehr flexibel) –

Antwort

62

Sie können zum hashchange Ereignisse hören:

$(window).on('hashchange',function(){ 
    $('h1').text(location.hash.slice(1)); 
}); 
+0

ok, das mag wie eine dumme Frage scheint aber tut Das geht am Ende des Körpers oder im Kopf, weil ich immer in dieser Hinsicht verwirrt bin? – user115422

+0

es nach 'jquery' einschließen –

+0

@RPM so in den Kopf? Danke :) – user115422

5

ich persönlich sammy verwenden würde, die Ihnen die Flexibilität gibt den Hashtag (add Platzhalter und in der Lage zu lesen, sie zurück) auf Vorlage. z.B. http://jsfiddle.net/KZknm/1/

+0

ich habe versucht. ' 'aber das Skript tut etwas aufmerksam machen, wenn ich den Hashtag ändern .. – user115422

+0

@fermionoid: Es tut So funktioniert das nicht. Sie müssen an Änderungen mit 'this.get (...);' –

+0

@fermionoid binden: sehen Sie das Beispiel, das ich in meiner aktualisierten Antwort eingeschlossen habe. –

Verwandte Themen