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

Lo más fresco

  1. LPAD en SQL Server Nuevo
  2. Eliminar todos los objetos en SQL Server Modificado
  3. Dominio principal Nuevo
  4. Eliminar formato en Excel Nuevo

Sugerencias del chef

Lo más visitado

  1. Dar formato a un número
  2. Campo autonumérico
  3. Fecha y hora
  4. Cookies
  5. Convertir IP entre cadena y número

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 10 de marzo de 2010 (22:20:00 +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-2010 by Álvaro G. Vicario (alvaro.es) • Burgos (España) • borrame.com