skip to main | skip to sidebar
Code 18
Manuel du savoir-faire à l'usage des geeks et des curieux
RSS
  • Accueil
  • Le web au Québec
  • Liens
  • Twitter
  • Facebook
  • À propos

dimanche 9 novembre 2008

Alternatives pour remplacer l'attribut target blank

Publié par Infinite Loop, à 21 h 10 0 commentaire

Initialement en HTML, lorsqu'on voulait ouvrir un lien dans une nouvelle fenêtre, on devait s'y prendre comme ceci :

<a href="http://www.google.com" target="_blank">Lien vers Google</a>

Malgré que l'attribut target soit déprécié depuis le XHTML 1.0, il est encore énormément utilisé. Depuis, une alternative populaire est de le remplacer par un appel JavaScript placé sur l'événement OnClick du lien :

<a href="http://www.google.com" onclick="window.open(this.href); return false;">Lien vers Google</a>

Pourtant, il serait possible de venir attacher ces événements par programmation en utilisant une combinaison de JavaScript, de Prototype, de sélecteur CSS et de l'attribut "rel". Normalement, l'attribut rel permet de décrire la relation entre la source du document et sa ressource spécifiée dans l'ancre (attribut href). Comme il s'agira d'une relation externe, j'utiliserai la valeur "external" qui est valide pour la norme XHTML :

<a href="http://www.google.com" rel="external">Lien vers Google</a>

À l'aide de la librairie prototype.js, on attachera une fonction d'initialisation (initExternalLinks) au chargement du document. À l'aide d'un sélecteur CSS appelé par $$ (depuis prototype 1.5.1), on cherchera dans le document tous les liens qui comportent l'attribut rel="external". À chaque lien trouvé, on attachera une fonction JavaScript qui permettra de prendre le href du lien et qui l'ouvrira dans une nouvelle page :

<script language="javascript" type="text/javascript">
function initExternalLinks(selector){
$$(selector).invoke('observe', 'click', function(e){
if(this.href){
window.open(this.href);
Event.stop(e);
}
});
}

Event.observe(window, 'load', function(){
initExternalLinks('a[rel=external]');
}
);

</script>
Ce code, placé en entête de chaque page (idéalement dans une librairie .js qu'on attachera aux documents, de même que prototype.js) permettra de créer des liens externes XHTML valides qui s'ouvriront dans une nouvelle fenêtre ou un nouvel onglet du fureteur.


Tags: JavaScript

0 réponse à "Alternatives pour remplacer l'attribut target blank"


Publier un commentaire

Message plus récent Messages plus anciens Accueil
S'abonner à : Publier des commentaires (Atom)
    Suivre @code18 sur Twitter

    Catégories

    • Apache (21)
    • Citations (167)
    • Club Vidéo (24)
    • Coffre à outils (55)
    • CSS (8)
    • Curiosités (117)
    • Design Pattern (2)
    • Drupal (8)
    • Easter Eggs (22)
    • Extensions Firefox (20)
    • GIMP (7)
    • Histoire (21)
    • HTML (32)
    • Humour (57)
    • Intégration (34)
    • iPod (12)
    • JavaScript (110)
    • Jeu de combat (6)
    • Le coin du geek (128)
    • Liens (12)
    • Linux (56)
    • Livres (78)
    • Lois et principes (46)
    • Marché des saveurs (26)
    • Mathématique (18)
    • Mobile (5)
    • Montréal (32)
    • Musique (112)
    • Pancartes et écriteaux (16)
    • Perl (8)
    • Pérou (1)
    • PHP (130)
    • PostgreSQL (44)
    • Programmation (105)
    • Saviez-vous que (55)
    • Sécurité (22)
    • SEO (5)
    • SQL Server (22)
    • Vieilles publicités (6)
    • Virtualisation (8)
    • Voyages (1)
    • Zend Framework (26)

    Divers

    Archives

    • ►  2015 (6)
      • ►  août 2015 (1)
      • ►  juillet 2015 (1)
      • ►  février 2015 (3)
      • ►  janvier 2015 (1)
    • ►  2014 (8)
      • ►  décembre 2014 (1)
      • ►  novembre 2014 (1)
      • ►  octobre 2014 (1)
      • ►  août 2014 (2)
      • ►  juillet 2014 (2)
      • ►  janvier 2014 (1)
    • ►  2013 (53)
      • ►  décembre 2013 (2)
      • ►  novembre 2013 (1)
      • ►  octobre 2013 (3)
      • ►  septembre 2013 (2)
      • ►  août 2013 (5)
      • ►  juillet 2013 (3)
      • ►  juin 2013 (5)
      • ►  mai 2013 (3)
      • ►  avril 2013 (7)
      • ►  mars 2013 (7)
      • ►  février 2013 (11)
      • ►  janvier 2013 (4)
    • ►  2012 (105)
      • ►  décembre 2012 (8)
      • ►  novembre 2012 (5)
      • ►  octobre 2012 (4)
      • ►  septembre 2012 (1)
      • ►  août 2012 (8)
      • ►  juillet 2012 (7)
      • ►  juin 2012 (7)
      • ►  mai 2012 (10)
      • ►  avril 2012 (13)
      • ►  mars 2012 (15)
      • ►  février 2012 (15)
      • ►  janvier 2012 (12)
    • ►  2011 (146)
      • ►  décembre 2011 (14)
      • ►  novembre 2011 (11)
      • ►  octobre 2011 (12)
      • ►  septembre 2011 (13)
      • ►  août 2011 (15)
      • ►  juillet 2011 (17)
      • ►  juin 2011 (18)
      • ►  mai 2011 (15)
      • ►  avril 2011 (9)
      • ►  mars 2011 (7)
      • ►  février 2011 (3)
      • ►  janvier 2011 (12)
    • ►  2010 (398)
      • ►  décembre 2010 (29)
      • ►  novembre 2010 (28)
      • ►  octobre 2010 (32)
      • ►  septembre 2010 (34)
      • ►  août 2010 (22)
      • ►  juillet 2010 (35)
      • ►  juin 2010 (42)
      • ►  mai 2010 (36)
      • ►  avril 2010 (37)
      • ►  mars 2010 (34)
      • ►  février 2010 (32)
      • ►  janvier 2010 (37)
    • ►  2009 (429)
      • ►  décembre 2009 (32)
      • ►  novembre 2009 (34)
      • ►  octobre 2009 (33)
      • ►  septembre 2009 (37)
      • ►  août 2009 (37)
      • ►  juillet 2009 (39)
      • ►  juin 2009 (38)
      • ►  mai 2009 (37)
      • ►  avril 2009 (35)
      • ►  mars 2009 (36)
      • ►  février 2009 (32)
      • ►  janvier 2009 (39)
    • ▼  2008 (84)
      • ►  décembre 2008 (34)
      • ▼  novembre 2008 (39)
        • Ajout d'un virtual host sur un serveur local
        • Citation no. 6 sur les intellectuels
        • Variations sur le thème de Google
        • Mauvaise blague à faire sur un poste de travail
        • Startup Camp Montreal 3
        • Songbird, un lecteur multimédia à surveiller
        • Gestion des droits avec Zend_Acl
        • Évolution des éditeurs web
        • Prendre avantage de __autoload() en PHP 5
        • Citation no. 5 sur Internet
        • Redirections avec .htaccess
        • Introduction à prototype.js
        • La meilleure page de l'univers
        • EasyPHP et activation de mod_rewrite
        • User Agent Switcher
        • Mise en page web avec des tableaux
        • Script batch pour rédémarrer IIS
        • À propos de Hotmail
        • Citation no. 4 sur la décadence
        • Lecture de .htaccess sur Cyberpresse
        • Connaître la taille d'un objet PostgreSQL
        • Encryption de mot de passe
        • Création d'une base de données PostgreSQL à partir...
        • World of Warcraft - Wrath of the Lich King
        • Banque d'images
        • Diaporamas multimédia avec Cooliris (PicLens)
        • Acronymes HTML
        • Alternatives pour remplacer l'attribut target blank
        • Citation no. 3 sur le doigt
        • Installer le langage PL/pgSQL pour PostgreSQL
        • Vous êtes perdu ?
        • PHP in Action
        • VirtualBox et les effets graphiques de KDE
        • Protéger l'accès d'une ressource à l'aide d'un mot...
        • Résultats des élections américaines
        • Création de types composites sous PostgreSQL
        • Citation no. 2 sur le progrès
        • Configurer VirtualBox en mode plein écran et fusio...
        • Virtualisation Linux sous Windows avec VirtualBox
      • ►  octobre 2008 (11)

    Abonnés

Copyright © All Rights Reserved. Code 18 | Converted into Blogger Templates by Theme Craft