Demogracia Bits

• • • Colección privada de recortes de código y documentación para programación web

[Sí, aún estamos en pruebas; ¿por?]

Enlaces externos

Esta funcioncilla de aspecto inocente procesa los enlaces externos de la página y les hace cosas inenarrables:

/*
 * Procesamos los enlaces marcados como externos (rel="external")
 *
 * etiqueta (cadena): HTML para añadir al final del enlace
 * enVentanaNueva (bool): ¿establecer target="_blank"?
 */
function enlacesExternos(etiqueta, enVentanaNueva){ // v2006-09-01
    if(!document.getElementsByTagName){
        return;
    }

    var titulo='enlace externo' + (enVentanaNueva ? ', nueva ventana' : '');
    var enlaces=document.getElementsByTagName('a');
    for(var i=0; i<enlaces.length; i++){
        var a=enlaces[i];
        if(a.getAttribute('href') && a.getAttribute('rel')=='external'){
            if(etiqueta){
                a.innerHTML+=etiqueta;
            }
            if(enVentanaNueva){
                a.target='_blank';
            }
            a.title+=(a.title!='' ? ' ' : '') + '[' + titulo + ']';
        }
    }
}

Un enlace lo marcamos como externo con el atributo rel="external".

Ejemplo de uso

<a rel="external" href="http://www.google.es/" title="Portada de Google España">Google<a>
enlacesExternos(' <img src="icono.png" width="14" height="14" alt="" title="">', true);

También podemos modificar la función y usar addClass() para asignar un atributo class de forma que en nuestro CSS podamos dar un estilo distinto a los enlaces.

¿Para qué la tontería de ejecutar a.target='_blank'; en JavaScript si lo de abrir un enlace en una nueva ventana se ha hecho toda la vida con HTML, concretamente target="_blank", y siempre nos ha ido tan ricamente?

Pues...

  1. Con un solo atributo (rel) controlamos todo lo que queramos hacer con el enlace. Es comodísimo.
  2. Separamos contenido y comportamiento. El HTML queda muy limpio. Además rel="external" es semántico, si es que te importan esas cosas.
  3. En las especificaciones strict de HTML y XHTML no existe el atributo target y usarlo produce código no válido.
  4. Al controlarlo mediante programación podemos hacerlo opcional y que el visitante decida, como en Demogracia Bits ;-)

Esta página ha sido impresa el domingo 6 de julio de 2008 (22:56:53 +0200) desde http://bits.demogracia.com/recortes/javascript/enlaces-externos.html, contenía HTML válido con CSS fresquito la última vez que lo miré y no debería tener flatas de ortografía.

Demogracia Bits no tiene absolutamente ninguna relación con Demogracia, salvo el nombre, el dominio punto com y que el autor es el mismo.

© 2005-2008 by Álvaro G. Vicario (alvaro.es) ¤ Burgos (España) ¤ http://bits.demogracia.com/