window.location.hash connaissances summary_basic connaissances

Location est un objet intégré en JavaScript qui gère la barre d'adresse. Par exemple, location.href gère l'URL de la page. En utilisant location.href=url, vous pouvez directement rediriger la page vers l'URL. Location.hash peut être utilisé pour obtenir ou définir la valeur de la balise de la page. Par exemple, location.hash="#admin" de http://domain/#admin. Une chose très significative peut être faite en utilisant cette valeur d'attribut.

application simple window.location.hash

1. La signification de #

# représente une position dans la page Web. Le caractère à droite est l'identifiant du poste. Par exemple,

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

représente la position d'impression de la page Web index.html. Une fois que le navigateur a lu cette URL, il fera automatiquement défiler la position d'impression jusqu'à la zone visible.

Spécifiez un identifiant pour l'emplacement de la page Web. Il existe deux méthodes. L'une consiste à utiliser des points d'ancrage, tels que 199509608094b4e81d651d148e35972c5db79b134e9f6b82c0b36e0489ee08ed, et l'autre consiste à utiliser des attributs d'identification, tels que 0e6856c47f8d911f7b1a7865abfc662c.

2. La requête HTTP n'inclut pas #

# est utilisé pour guider les actions du navigateur et est totalement inutile côté serveur. Par conséquent, # n’est pas inclus dans la requête HTTP.

Par exemple, visitez l'URL suivante,

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

La requête réelle envoyée par le navigateur ressemble à ceci :

　GET /index.html HTTP/1.1

Hôte : www.example.com

Comme vous pouvez le voir, il ne demande que index.html, et il n'y a aucune partie "#print".

3. Caractères après #

Tous les caractères qui apparaissent après le premier # seront interprétés par le navigateur comme un identifiant de localisation. Cela signifie qu'aucun de ces caractères ne sera envoyé au serveur.

Par exemple, l'intention initiale de l'URL suivante est de spécifier une valeur de couleur :

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

Cependant, la requête réelle faite par le navigateur est :

　GET /?color= HTTP/1.1

Hôte : www.example.com

Comme vous pouvez le voir, "#fff" est omis. Ce n'est que lorsque # est transcodé en # que le navigateur le traitera comme un caractère littéral. En d'autres termes, l'URL ci-dessus doit être écrite comme :

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

4. Changez le # sans déclencher le rechargement de la page Web

Changez simplement la partie après #, le navigateur défilera uniquement jusqu'à la position correspondante et ne rechargera pas la page Web.

Par exemple, de

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

a été remplacé par

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

Le navigateur ne demandera pas à nouveau index.html au serveur.

5. Changer # modifiera l’historique d’accès du navigateur

Chaque fois que vous modifiez la partie #, un enregistrement sera ajouté à l'historique d'accès du navigateur. Utilisez le bouton "Retour" pour revenir à la position précédente.

Ceci est particulièrement utile pour les applications ajax. Différentes valeurs # peuvent être utilisées pour représenter différents états d'accès, puis l'utilisateur peut recevoir un lien pour accéder à un certain état.

Il est à noter que les règles ci-dessus ne s'appliquent pas à IE 6 et IE 7, elles n'augmenteront pas l'historique en raison du changement de #.

6. window.location.hash lit # valeur

La propriété window.location.hash est lisible et inscriptible. Lors de la lecture, il peut être utilisé pour déterminer si l'état de la page Web a changé ; lors de l'écriture, un enregistrement de l'historique des accès sera créé sans recharger la page Web.

7. événement onhashchange

Il s'agit d'un nouvel événement en HTML 5. Lorsque la valeur # change, cet événement sera déclenché. IE8, Firefox 3.6, Chrome 5 et Safari 4.0 prennent en charge cet événement.

Il existe trois façons de l'utiliser :

　window.onhashchange = func;

　ff8b939e37f4cd951197bd4ad61700f2

window.addEventListener("hashchange", func, false);

Pour les navigateurs qui ne prennent pas en charge onhashchange, vous pouvez utiliser setInterval pour surveiller les modifications dans location.hash.

8. Le mécanisme d'exploration de Google #

Par défaut, les robots d'exploration de Google ignorent la partie # de l'URL.

Cependant, Google stipule également que si vous souhaitez que le contenu généré par Ajax soit lu par le moteur de navigation, vous pouvez utiliser "#!" dans l'URL, et Google convertira automatiquement le contenu qui le suit en valeur du chaîne de requête _escaped_fragment_ .

Par exemple, Google a constaté que l'URL de la nouvelle version de Twitter est la suivante :

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

explorera automatiquement une autre URL :

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

Grâce à ce mécanisme, Google peut indexer le contenu Ajax dynamique.

Regardons quelques internautes qui ont rencontré un tel problème. Comme le montre le code suivant, chaque fois que vous cliquez sur un bouton de la page, la valeur dans la barre d'adresse du navigateur sera modifiée de cette façon, vous pouvez tromper le. navigateur (sans envoyer aucune information au navigateur). Le serveur envoie une nouvelle requête, rendant ainsi disponibles ses boutons "précédent" et "suivant".

Le problème actuel est que les valeurs du navigateur ont changé sous ie6 et ff3, mais seuls "forward" et "backward" peuvent être utilisés sous ff3, ces deux-là sont gris et indisponibles. . Pourquoi?

Le code est le suivant

<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> 

Ce qui suit concerne l'utilisation du hachage combiné avec ajax. Chaque fois qu'ajax récupère des données, le navigateur ne génère pas d'enregistrement d'historique après la mise à jour de la page, ce qui signifie que les boutons Précédent et Suivant perdent leur utilité. , hash et window peuvent être combinés. Utilisez onhashchange Notez que ie6 et 7 ne prennent pas en charge onhashchange, mais vous pouvez utiliser setInterval pour vérifier régulièrement les modifications de hachage ou enregistrer onload.

Mise en œuvre spécifique :

<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 est sa propre classe ajax encapsulée, dans laquelle ajax.Startup() doit envoyer une requête ajax ; 2. L'objet Object enregistre les enregistrements historiques. Si l'attribut de l'objet est un nombre, il doit être instancié à l'aide de obj["1"], sinon il violera la convention de dénomination.
3. Utilisez window.onhashchange pour détecter la valeur de hachage et obtenir des données historiques.