window.location.hash Wissenszusammenfassung_Grundwissen

Location ist ein in JavaScript integriertes Objekt, das die Adressleiste verwaltet. Mit location.href=url können Sie die Seite direkt auf die URL umleiten. Location.hash kann verwendet werden, um den Tag-Wert der Seite abzurufen oder festzulegen. Zum Beispiel location.hash="#admin" von http://domain/#admin. Mit diesem Attributwert kann etwas sehr Sinnvolles getan werden.

window.location.hash einfache Anwendung

1. Die Bedeutung von #

# steht für eine Position auf der Webseite. Das Zeichen rechts ist die Kennung der Position. Zum Beispiel

　http://www.example.com/index.html#print

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.

Geben Sie eine Kennung für den Webseitenstandort an. Es gibt zwei Methoden. Zum einen werden Ankerpunkte wie 199509608094b4e81d651d148e35972c5db79b134e9f6b82c0b36e0489ee08ed verwendet, zum anderen werden ID-Attribute wie 0e6856c47f8d911f7b1a7865abfc662c verwendet.

2. HTTP-Anfrage enthält 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 tatsächliche vom Browser gesendete Anfrage sieht folgendermaßen aus:

　GET /index.html HTTP/1.1

Host: www.example.com

Wie Sie sehen können, 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 Standortkennung interpretiert. Dies bedeutet, dass keines dieser Zeichen an den Server gesendet wird.

Zum Beispiel besteht die ursprüngliche Absicht der folgenden URL darin, einen Farbwert anzugeben:

　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 # umgewandelt wird, behandelt der Browser es als Literalzeichen. Mit anderen Worten, die obige URL sollte wie folgt geschrieben werden:

　http://example.com/?color=#fff

4. # ändern, ohne das Neuladen der Webseite auszulö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

wurde in

geändert

　http://www.example.com/index.html#location2

Der Browser fordert index.html nicht erneut vom Server an.

5. Wenn Sie # ändern, ändert sich der Zugriffsverlauf des Browsers

Jedes Mal, wenn Sie den #-Teil ä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. Es können verschiedene #-Werte verwendet werden, um unterschiedliche Zugriffszustände darzustellen, und dann kann dem Benutzer ein Link zum Zugriff auf einen bestimmten Zustand gegeben werden.

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. Wenn sich der #-Wert ändert, wird dieses Ereignis ausgelöst. IE8, Firefox 3.6, Chrome 5 und Safari 4.0 unterstützen dieses Ereignis.

Es gibt drei Möglichkeiten, es zu verwenden:

　window.onhashchange = func;

　ff8b939e37f4cd951197bd4ad61700f2

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 umwandelt Abfragezeichenfolge _escaped_fragment_ .

Google hat beispielsweise herausgefunden, dass die URL der neuen Version von Twitter wie folgt lautet:

　http://twitter.com/#!/username

crawlt automatisch eine andere URL:

　http://twitter.com/?_escaped_fragment_=/username

Durch diesen Mechanismus kann Google dynamische Ajax-Inhalte indizieren.

Sehen wir uns einige Internetnutzer an, die auf ein solches Problem gestoßen sind. Wie im folgenden Code gezeigt, wird der Wert in der Adressleiste des Browsers geändert Browser (ohne irgendwelche Informationen an den Browser zu senden). Der Server sendet eine neue Anfrage und stellt seine Schaltflächen „Zurück“ und „Vorwärts“ zur Verfügung.

Das aktuelle Problem besteht darin, dass sich die Browserwerte unter ie6 und ff3 geändert haben, aber unter ie nur „vorwärts“ und „rückwärts“ verwendet werden können. Unter ie sind diese beiden grau und nicht verfügbar . Warum?

Der Code lautet wie folgt

<html> 
<head> 
<script type="text/javascript"> 
//每次点击都会调用test()，它会改变url的值 
var i=0; 
function test(){   
  window.location.hash=i; 
  i++;   
} 
</script> 
</head> 
<body> 
<input type="submit" value="xxxxxxxxxxxxx" onclick="test()"/> 
</body> 
</html> 

Im Folgenden geht es um die Verwendung von Hash in Kombination mit Ajax. Jedes Mal, wenn Ajax Daten abruft, generiert der Browser nach der Aktualisierung der Seite ihren Nutzen , Hash und Fenster können kombiniert werden. Beachten Sie, dass ie6 und 7 onhashchange nicht unterstützen. Sie können jedoch setInterval verwenden, um Hash-Änderungen regelmäßig zu überprüfen oder Onload einzuchecken.

Spezifische Implementierung:

<body>
  <div id="div1"></div>
  <input type="button" value="click" onclick="GetT()" /> 
</body>
</html>
<script type="text/javascript" src="js/AjaxHasPool.js">
</script>
<script type="text/javascript">
var ajax = new AjaxHasPool();
var method="get";
var url ="Handler.ashx";
var i = 1;
var obj = new Object();
function GetT()
{
  document.getElementById("div1").innerHTML=i; 
  ajax.Startup(null,url,method,ep);
}
function ep(xmlobj){
  eval("obj['"+i+"']="+i+";");
  location.hash="#"+i;
++i; 
}
window.onhashchange=function(){
var hashStr = location.hash.replace("#","");
if(typeof(eval("obj['"+hashStr+"']"))!="undefined") 
     document.getElementById("div1").innerHTML=eval("obj['"+hashStr+"']"); 
}
</script>

1.AjaxHasPool ist eine eigene gekapselte Ajax-Klasse, in der ajax.Startup() eine Ajax-Anfrage senden soll; 2. Das Objektobjekt speichert historische Datensätze. Wenn das Objektattribut eine Zahl ist, muss es mit obj["1"] instanziiert werden, andernfalls verstößt es gegen die Namenskonvention.
3. Verwenden Sie window.onhashchange, um den Hash-Wert zu erkennen und historische Daten abzurufen.