-
Im September letzten Jahres hat Twitter seine Version überarbeitet. Eine wesentliche Änderung besteht darin, dass der URL das Symbol „#!“ hinzugefügt wurde. Beispielsweise lautet die URL der Benutzer-Homepage vor der Überarbeitung
Nach der Überarbeitung wurde es
http://twitter.com/#!/username
Dies ist das erste Mal, dass „#“ in großem Umfang von einer Mainstream-Website in wichtigen URLs verwendet wird. Dies zeigt, dass die Rolle des Hash-Zeichens neu erkannt wird. Dieser Artikel basiert auf dem Artikel von HttpWatch, um alle wichtigen Wissenspunkte im Zusammenhang mit dem Nummernzeichen zu klären.
1. Die Bedeutung von #
#Stellt eine Position auf der Webseite dar. Das Zeichen rechts ist die Kennung der Position. Zum Beispiel,
http://www.example.com/index.html#PRint
Es stellt die Druckposition der Webseite index.html dar. Nachdem der Browser diese URL gelesen hat, scrollt er automatisch von der Druckposition in den sichtbaren Bereich. Es gibt zwei Möglichkeiten, eine Kennung für den Standort einer Webseite anzugeben. Eine besteht darin, Ankerpunkte wie <a name="print"></a> zu verwenden, und die andere darin, ID-Attribute wie <div id="print" > zu verwenden.
2. HTTP-Anfragen enthalten kein #
# wird zur Steuerung von Browseraktionen verwendet und ist auf der Serverseite völlig nutzlos. Daher ist # nicht in der HTTP-Anfrage enthalten.
Besuchen Sie beispielsweise die folgende URL:
http://www.example.com/index.html#print
Die eigentliche Anfrage des Browsers lautet wie folgt:
GET /index.html HTTP/1.1
Host: www.example.com
Wie Sie sehen, wird nur index.html angefordert und es gibt überhaupt keinen „#print“-Teil.
3. Zeichen nach #
Alle Zeichen, die nach dem ersten # erscheinen, werden vom Browser als Positionskennung interpretiert. Dies bedeutet, dass keines dieser Zeichen an den Server gesendet wird.
Die folgende URL soll beispielsweise einen Farbwert angeben:
http://www.example.com/?color=#fff
Die eigentliche Anfrage des Browsers lautet jedoch:
GET /?color= HTTP/1.1
Host: www.example.com
Wie Sie sehen, wird „#fff“ weggelassen. Nur wenn # in %23 transkodiert wird, behandelt der Browser es als Literalzeichen. Das heißt, die obige URL sollte wie folgt geschrieben werden:
http://example.com/?color=%23fff
4. Ändern Sie #Kein Neuladen der Webseite auslösen
Ändern Sie einfach den Teil nach #, der Browser scrollt nur zur entsprechenden Position und lädt die Webseite nicht neu.
Zum Beispiel von
http://www.example.com/index.html#location1
Wechseln zu
http://www.example.com/index.html#location2
Der Browser fordert index.html nicht erneut vom Server an.
5. Durch Ändern von # wird der Zugriffsverlauf des Browsers geändert
Jedes Mal, wenn Sie den Teil nach # ändern, wird ein Datensatz zum Zugriffsverlauf des Browsers hinzugefügt. Verwenden Sie die Schaltfläche „Zurück“, um zur vorherigen Position zurückzukehren. Dies ist besonders nützlich für Ajax-Anwendungen, bei denen unterschiedliche #-Werte verwendet werden können, um unterschiedliche Zugriffszustände darzustellen, und dem Benutzer dann ein Link zum Zugriff auf einen bestimmten Zustand gegeben werden kann. Es ist erwähnenswert, dass die oben genannten Regeln nicht für IE 6 und IE 7 gelten und der Verlauf aufgrund der Änderung von # nicht erhöht wird.
6. window.location.hash liest # Wert
Die Eigenschaft window.location.hash ist lesbar und beschreibbar. Beim Lesen kann festgestellt werden, ob sich der Status der Webseite geändert hat. Beim Schreiben wird ein Zugriffsverlaufsdatensatz erstellt, ohne dass die Webseite neu geladen werden muss.
7. onhashchange-Ereignis
Dies ist ein neues Ereignis in HTML 5. Dieses Ereignis wird ausgelöst, wenn sich der #-Wert ändert. IE8+, Firefox 3.6+, Chrome 5+, Safari 4.0+ unterstützen dieses Ereignis.
Es gibt drei Möglichkeiten, es zu verwenden:
window.onhashchange = func;
<body onhashchange="func();">
window.addEventListener("hashchange", func, false);
Für Browser, die onhashchange nicht unterstützen, können Sie setInterval verwenden, um Änderungen in location.hash zu überwachen.
8. Der Mechanismus des Google-Crawlings #
Standardmäßig ignorieren die Webspider von Google den #-Teil der URL.
Google schreibt jedoch auch vor, dass Sie, wenn Sie möchten, dass der von Ajax generierte Inhalt von der Browser-Engine gelesen wird, „#!“ in der URL verwenden können und Google den darauf folgenden Inhalt automatisch in den Wert der Abfragezeichenfolge _escaped_fragment_ umwandelt. .
Google hat beispielsweise herausgefunden, dass die URL der neuen Twitter-Version wie folgt lautet:
http://twitter.com/#!/username
Eine andere URL wird automatisch gecrawlt:
http://twitter.com/?_escaped_fragment_=/username
Durch diesen Mechanismus kann Google dynamische Ajax-Inhalte indizieren.
Quelle des Artikels: Ruan Yifengs Online-Tagebuch