borrame.com - Colección particular de recortes de código y documentación para programación web

Canales RSS

Lo más fresco

  1. Reemplazar selección con JavaScript Nuevo
  2. ¿Esta IP pertenece a esta red? Modificado
  3. Mozilla Firefox Modificado

Sugerencias del chef

Lo más visitado

  1. Dar formato a un número
  2. Fecha y hora
  3. Campo autonumérico
  4. Rotar logs en Windows
  5. Reiniciar Apache con cuidado (graceful restart)
Compartir esta página

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 borrame.com ;-)

Esta página ha sido impresa el miércoles 8 de febrero de 2012 (02:00:55 +0100) desde http://borrame.com/recortes/javascript/enlaces-externos.html. La última vez que miré contenía HTML válido con CSS fresquito y si tiene flatas de ortografía ha sido sin querer.

borrame.com es el sitio anteriormente conocido como bits.demogracia.com (no confundir con Demogracia, que sólo pasaba por ahí).

© 2005-2011 by Álvaro G. Vicario (alvaro.es) • Burgos (España) • borrame.com