-
En septembre de l'année dernière, Twitter a réorganisé sa version. Un changement important est que le symbole « # ! » a été ajouté à l'URL. Par exemple, l'URL de la page d'accueil de l'utilisateur avant la révision est
http://twitter.com/nom d'utilisateur
Après révision, il est devenu
http://twitter.com/#!/nom d'utilisateur
C'est la première fois que le « # » est utilisé à grande échelle dans des URL importantes par un site Web grand public. Cela montre que le rôle du signe dièse est de plus en plus reconnu. Cet article est basé sur l'article de HttpWatch pour trier tous les points de connaissances importants liés au signe dièse.
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
Il 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. Il existe deux manières de spécifier un identifiant pour l'emplacement d'une page Web. L'une consiste à utiliser des points d'ancrage, tels que <a name="print"></a>, et l'autre consiste à utiliser des attributs d'identification, tels que <div id="print" >.
2. Les requêtes HTTP n'incluent 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 faite par le navigateur est la suivante :
OBTENIR /index.html HTTP/1.1
Hébergeur : www.example.com
Comme vous pouvez le voir, seul index.html est demandé et il n'y a aucune partie "#print".
3. Caractères après #
Tous les caractères apparaissant après le premier # seront interprétés par le navigateur comme un identifiant de position. Cela signifie qu'aucun de ces caractères ne sera envoyé au serveur.
Par exemple, l'URL suivante est destinée à spécifier une valeur de couleur :
http://www.example.com/?color=#fff
Cependant, la requête réelle faite par le navigateur est :
OBTENIR /?color= HTTP/1.1
Hébergeur : www.example.com
Comme vous pouvez le constater, "#fff" est omis. Seulement si # est transcodé en %23, le navigateur le traitera comme un caractère littéral. Autrement dit, l'URL ci-dessus doit être écrite comme suit :
http://exemple.com/?color=%23fff
4. Modifiez #Ne pas 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
Changer pour
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 après #, 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, où 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 convient de 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 accessible en écriture. 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 dans HTML 5. Cet événement sera déclenché lorsque la valeur # changera. IE8+, Firefox 3.6+, Chrome 5+, Safari 4.0+ prennent en charge cet événement.
Il existe trois façons de l'utiliser :
window.onhashchange = func;
<body onhashchange="func();">
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 Web 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 de la 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/#!/nom d'utilisateur
Une autre URL sera automatiquement explorée :
http://twitter.com/?_escaped_fragment_=/username
Grâce à ce mécanisme, Google peut indexer le contenu Ajax dynamique.
Source de l'article : journal en ligne de Ruan Yifeng