2
JQuery : ajouter automatiquement les favicons sur les liens externes
tags : 
Petite astuce toute simple pour faire apparaître facilement le favicon sur tous les liens externes présent sur la page.
Le code JQuery onstruit simplement l’URL de l’icone (de type http://www.example.com/favicon.ico) et l’affiche à côté du lien. Pour que l’affichage fonctionne, il faut absolument que le site en question est un favicon nommé favicon.ico à la racine du site (en théorie sur tous les sites possédant un favicon, si ceux-ci sont bien faits !). L’affichage se fait ensuite facilement : il faut définir le fond du lien et préparer la class CSS définissant le padding et empêchant le fond de se répéter.
1 2 3 4 5 6 7 8 9 | $(document).ready( function () { jQuery('a[href^="http://"]').filter(function(){ // on détecte tous les liens ayant l'attribut href commençant par http:// return this.hostname && this.hostname !== location.hostname; // il faut que le domaine soit différent du domaine du site (on veut traiter que les liens externes) }).each(function() { // pour chacun des liens externes var link = jQuery(this); // on met les propriétés du lien dans une variable var faviconURL = link.attr('href').replace(/^(http:\/\/[^\/]+).*$/, '$1')+'/favicon.ico'; // on construit l'url du favicon (de type http://www.example.com/favicon.ico) $(this).addClass("favicon").css("background-image", "url("+faviconURL+")"); // on ajoute la class CSS "favicon" au lien (pour le padding par exemple) et on définit le fond du lien }); }); |
Et c’est tout 
!
En exemple, je met également le code de la class CSS que j’ai utilisée pour la démo :
1 2 3 4 5 | a.favicon { padding-left:20px; background-position:0 50%; background-repeat:no-repeat; } |
catégorie : JQuery
Bonjour,
Un préchargement de l’image ou un HEAD pour vérifier l’éxistence permettrait de ne pas avoir de padding si il n’y a pas de favicon.
Sinon, l’idée est intéressante.
++
Il existe déjà 2 plugins jQuery traitant des favicons dans le même style :
- http://www.babylon-design.com/share/faviconize/
- http://www.zen-in-progress.com/ressource/jquery-externallink/
Le second reprend la logique du premier avec plus d’options et des créations d’éléments en DOM plus propre.