miércoles, 23 de enero de 2013

Abrir vínculos en ventana nueva con rel="external"

En las especificaciones de W3C sobre XHTML 1.0 y HTML 4.01 estricto el atributo target dejó de ser válido en los enlaces. Dicho atributo debía ser sustituido por el atributo rel. El problema es que los navegadores nunca llegaron a implementar este cambio y con las especificaciones de HTML 5 esta prohibición se ha relajado. Por lo tanto target vuelve a ser un atributo válido. Aun así si necesitamos que un código valide como XHTML no podemos incluir ese atributo.

Entonces, ¿Como hacemos que un vínculo se abra en una nueva ventana sin usar target="_blank"? Existen multitud de trucos, especialmente usando javascript. Hoy voy a poner un sencillo código jQuery que permitirá abrir en una ventana nueva cualquier enlace que incluya el atributo rel="external". Veamoslo:

$(document).ready(function() {
    $('a[rel="external"]').click(function() {
        $(this).attr('target', '_blank');
    });
});

Este truco añade en tiempo de ejecución el atributo target="_blank" a los enlaces con rel="external". Los validadores de XHTML indicarán que el código es válido y el navegador abrirá el enlace en una ventana nueva.


Ejemplos:

<a rel="external" href="http://www.ifraktal.com/">iFraktal</a>
<a rel="external" href="http://www.blogger.com/">Blogger</a>

¿Para que sirve realmente el atributo "rel"?

El atributo "rel" está asociado a la etiqueta "<a>" (hipervínculo) y sirve para indicar la relación entre el documento actual y el documento destino del enlace. Actualmente los navegadores más usados ignoran este atributo, aunque suele ser incluirse con propósitos de SEO, ya que algunos motores de búsqueda sí que lo tienen en cuenta. Algunos de los valores del atributo "rel" son:

  • alternate: Enlaza a una versión alternativa del documento actual.
  • author: Enlaza con el autor del documento actual.
  • external: Enlaza con un documento externo.
  • help: Enlaza a un documento de ayuda.
  • license: Enlaza a un documento con información sobre el coyright.
  • nofollow: Indica a los robots de búsqueda que no sigan ese enlace.
  • noreferrer: Indica al navegador que no envíe HTTP-REFERER.

Enlaces y referencias:

No hay comentarios:

Publicar un comentario