Utilisation d'URL de hachage avec un exemple de jQuery

De nombreuses applications Web modernes utilisent ces jours-ci les URL de hachage Pour ajouter l'unicité (comme une balise de page, une section, une action, etc.) à une page sans rafraîchir le plus jeune peut l'identifier. Cela suit d'obtenir des paramètres URL à l'aide de jQuery pour transmettre des données dynamiques à la page via l'URL. Qui est encore largement utilisé sur le www.

window.location.hash vs document.url

Jetons un coup d'œil à des deux et ci-dessous un regex que vous pouvez utiliser pour saisir la balise de hachage.

<span>//using window.location.hash
</span>$<span>.fn.urlHash = function()
</span><span>{
</span>  <span>return window.location.hash.replace('#','');
</span><span>};
</span>$<span>.urlHash();</span>

IMPORTANT: Emplacement.hash n'est pas sûr pour IE (y compris IE9). De plus, si votre page contient un iframe, après une rafraîchissement manuel à l'intérieur du contenu IFRAME, il obtient l'ancien emplacement.

<span>//IE Proof - URL Hash Grab - returns complete hash value
</span>$<span>.fn.urlHash = function()
</span><span>{
</span>  <span>return document.URL.substr(document.URL.indexOf('#')+1);
</span><span>};
</span>$<span>.urlHash();</span>

Donc, comme exemple pour extraire la valeur de balise de hachage de jour de la semaine, vous le feriez comme ceci:

<span>//in context - extract dayofweek hash
</span><span>//eg  url#dayofweek1 would return 1
</span><span>if (document.URL.indexOf('#dayofweek'))
</span><span>{
</span>    week <span>= parseInt(document.URL.substr(document.URL.indexOf('#')+1).replace('dayofweek',''))-1;
</span>    $resParent<span>.eq(week).showResources();
</span><span>}</span>

Une autre manière décente

C'est une autre manière décente en utilisant un regex plus lourd (le signe de la livre est facultatif, car .match () ne renvoie jamais null).

<span>var match = location.hash.match(<span>/<span>^#?(.*)$</span>/</span>)[1];
</span><span>if (match)
</span><span>{
</span>   <span>//do stuff...
</span><span>}</span>

échoue…

<span>var hash = location.hash.match(<span>/#<span>(w+)</span>/</span>)[1];</span>

Problèmes: renvoie les mauvais résultats lorsqu'il y a un caractère non latin ou non alphanumérique dans le hachage. Par exemple, pour le hash # foo @ o # bar $% Huh bonjour, juste «foo» serait retourné. Lance une énergie type lorsque l'emplacement est vide, car .match () retournera null

<span>var hash = location.hash.split('#')[1];</span>

Avec le même hachage de test, il obtiendrait au moins la partie «foo @ o», ce qui signifie qu'il échoue uniquement lorsque le hachage contient un signe de livre. Lorsqu'il n'y a pas de hachage, il ne lance pas d'erreur, bien qu'il renvoie indéfini au lieu de la chaîne vide.

Matériel de référence

Obtenez votre hachage - le chemin des balles

Les questions fréquemment posées (FAQ) sur les URL de hachage

Qu'est-ce qu'une URL de hachage et pourquoi est-ce important?

Une URL de hachage est une URL qui comprend un symbole de hachage (#) suivi d'un identifiant. Cet identifiant est utilisé pour pointer une section spécifique dans une page Web. Les URL de hachage sont importantes car ils permettent aux utilisateurs de naviguer directement vers un contenu spécifique sur une page, sans avoir à faire défiler la page entière. Ceci est particulièrement utile pour les longues pages Web avec plusieurs sections. De plus, les URL de hachage peuvent être utilisées pour maintenir l'état dans une application Web d'une seule page, où le hachage change pour refléter la vue actuelle.

Comment puis-je créer une URL de hachage?

Création d'un hachage L'URL est assez simple. Tout ce que vous avez à faire est d'ajouter un symbole de hachage (#) suivi d'un identifiant à votre URL. Par exemple, si vous avez une page sur www.example.com et que vous souhaitez créer une URL de hachage qui pointe vers une section appelée «Section1», votre URL de hachage serait www.example.com # section1.

Comment puis-je utiliser jQuery pour manipuler les URL de hachage?

jQuery fournit plusieurs méthodes pour manipuler les URL de hachage. La propriété «hachage» de l'objet «Emplacement» peut être utilisée pour obtenir ou définir la partie de hachage de l'URL. Par exemple, pour définir le hachage sur «Section1», vous utiliseriez l'emplacement.hash = «section1» ;. Pour obtenir le hachage actuel, vous utiliseriez var hash = location.hash ;.

En modifiant le hachage, vous pouvez charger un contenu différent sans rafraîchir la page. Ceci est souvent utilisé dans des applications à page unique pour créer une expérience utilisateur fluide.

Comment puis-je détecter les modifications de hachage avec jQuery?

jQuery fournit l'événement 'hashchange', qui est déclenché chaque fois que le hachage changements. Vous pouvez utiliser cet événement pour exécuter du code chaque fois que le hachage change. Par exemple, $ (fenêtre) .on ('hashchange', function () {/ * Votre code ici * /});.

y a-t-il des inconvénients pour utiliser les URL de hachage?

Bien que les URL de hachage puissent être très utiles, il existe certains inconvénients. Un inconvénient majeur est qu'ils peuvent entraîner des problèmes avec l'optimisation des moteurs de recherche (SEO), car les moteurs de recherche peuvent ne pas indexer le contenu associé au hachage. De plus, les URL de hachage peuvent causer des problèmes avec l'analyse, car ils ne sont pas toujours suivis comme des pages vues distinctes.

Puis-je utiliser des URL de hachage avec des balises d'ancrage?

Oui, les URL de hachage sont souvent utilisées avec les URL avec souvent avec ONCHOR TAGS Pour créer des «liens de saut» qui permettent aux utilisateurs de naviguer directement vers des sections spécifiques d'une page. Le hachage dans l'URL correspond à l'attribut 'id' de la balise d'ancrage.

Comment puis-je supprimer le hachage d'une URL avec jQuery?

Vous pouvez supprimer le hachage d'une URL par Définition de la propriété 'hash' de l'objet 'emplacement' sur une chaîne vide. Par exemple, location.hash = '';.

Puis-je utiliser des URL de hachage pour stocker les informations d'état?

Oui, les URL de hachage peuvent être utilisées pour stocker les informations d'état. Ceci est souvent utilisé dans les applications à une seule page, où l'état de l'application est stocké dans le hachage. Cela permet à l'utilisateur de revenir au même état en utilisant le bouton de retour ou en mettant en signet l'URL.

Comment puis-je utiliser des URL de hachage pour la liaison profonde?

Lien profond est la pratique de la pratique de Utilisation d'une URL pour naviguer directement vers un contenu spécifique dans une page. Les URL de hachage sont parfaites pour cela, car ils vous permettent de créer un lien directement à une section spécifique d'une page. Pour utiliser une URL de hachage pour une liaison profonde, ajoutez simplement le hachage et l'identifiant de la section à votre URL.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!