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

Canales RSS

Lo más fresco

  1. Bookmarklets Nuevo
  2. Recetario básico para CakePHP/2 Nuevo
  3. Certificado auto-firmado Nuevo

Sugerencias del chef

Lo más visitado

  1. Fecha y hora
  2. Dar formato a un número
  3. Reiniciar secuencia
  4. Vaciar un esquema
  5. Certificado auto-firmado
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 sábado 23 de septiembre de 2017 (02:23:45 +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-2017 by Álvaro González (alvaro.es) • Burgos (España) • borrame.com