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

Lo más fresco

  1. Cadena aleatoria en PHP (¡ahora también multi-byte!) Modificado
  2. Cookies en JavaScript Modificado
  3. Reiniciar Apache con cuidado (graceful restart) Modificado

Sugerencias del chef

Lo más visitado

  1. Dar formato a un número
  2. Fecha y hora
  3. Cookies
  4. Rotar logs en Windows
  5. Reiniciar Apache con cuidado (graceful restart)

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 jueves 29 de julio de 2010 (21:27:57 +0200) 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-2010 by Álvaro G. Vicario (alvaro.es) • Burgos (España) • borrame.com