Cómo abrir una nueva ventana en XHTML Strict

La recomendación de XHTML Estricto ha eliminado el atributo target en la etiqueta de vínculos (<a>), por lo que su uso en el código HTML o XHTML impedirá que nuestros sitios sean válidos ¿Pero cómo resolver el problema cuando realmente necesitamos (sin tener en cuenta los molestos pop-up) que nuestro vínculo se abra en una ventana/pestaña aparte? La respuesta: echando mano de un nuevo atributo de vínculos (el atributo rel) y de un pequeño código en Javascript.

El Atributo rel:

Ya existente en la etiqueta link, es añadido a la etiqueta a para darle significado semántico a los vínculos. En otras palabras, permite establecer la relación entre la página donde está el vínculo y la página a donde lleva. Aunque tiene algunos valores determinados, es permitido colocar valores personalizados por parte del diseñador/desarrollador.

Esta flexibilidad del atributo rel ha permitido darle otras aplicaciones por parte de los buscadores como Google o Yahoo!, que han acordado no hacer seguimiento de los vínculos cuyo atributo rel sea “nofollow”, para ayudar a combatir el endemoniado spam (Yeah! ), o el caso de Technorati, que promueve el uso del valor “tag” para ayudar en la búsqueda por etiquetas.

Esta misma flexibilidad es la que usaremos para nuestra técnica.

Lo primero que debemos hacer es agregar a nuestras etiquetas <a> el atributo rel, al que asignaremos el valor que usaremos para saber cuáles son los vínculos que queremos abrir en una ventana nueva (no es obligatorio, pero dado que se ha estado volviendo un estándar, usaremos el valor external). Por ejemplo, si queremos aplicar esta técnica a un vínculos a cristalab.com, colocaríamos:


Una vez hecho esto, creamos un documento .js donde escribiremos el código javascript que hará “la magia” . En él escribiremos esto:

Código :

function openExternal(){
    if(!document.getElementsByTagName) return;
    var anchors = document.getElementsByTagName(’a');
    for(var i = 0; i < anchors.length; i++){
        var thisAnchor = anchors[i];
        if(thisAnchor.getAttribute(’href’) && thisAnchor.getAttribute(’rel’) == ‘external’){
            thisAnchor.target = ‘_blank’;
        }
    }
}

window.onload = openExternal;

Expliquemos un poco el código:

Lo primero que hacemos es crear una función (en este caso la he llamado “openExternal”). Esta función es la que:

1. Chequeará que haya etiquetas en nuestro (X)HTML. Si no las encuentra, sale de la función sin devolver ningún resultado.
   

   Código :

    if(!document.getElementsByTagName) return;

   
   
2. En caso de encontrarlas, las almacenará en un Array
   

   Código :

   var anchors = document.getElementsByTagName('a');

   
   
3. Por medio de un Bucle for, chequeamos dos cosas:
   
   
   
   1. Que el vínculo tenga un atributo href.
      
   2. Que el atributo rel sea “external”.
      
   
   
4. Si ambas condiciones son ciertas, agregamos al vínculo el atributo target y le asignamos el valor _blank.
   

   Código :

   for(var i = 0; i < anchors.length; i++){
       var thisAnchor = anchors[i];
       if(thisAnchor.getAttribute('href') && thisAnchor.getAttribute('rel') == 'external'){
           thisAnchor.target = '_blank';
       }
   }
   

Esta sería toda la función. Ahora lo único que nos queda es llamarla cuando se cargue la página para que se ejecute después que todos los vínculos han sido cargados y antes que el usuario haga algo.

Código :

window.onload = openExternal;

Una vez escrito el código, guardamos nuestro archivo y le colocamos un nombre que nos permita identificar qué hace (yo llamé al mío external_links.js).

¿Por qué guardarlo en un archivo aparte? Por dos razones:

1. Hacemos nuestro (X)HTML más limpio separando la maquetación (el HTML como tal) de la programación, así se lee mejor y podemos dedicarnos a cada cosa (la maquetación o la programación) separadamente sin afectar el otro archivo. Esta es la misma razón para usar archivos .css para dar estilo a nuestro HTML.
   
2. Hacemos nuestro código reusable porque, al estar en un archivo aparte, si lo necesitamos en otro proyecto sólo tendremos que copiarlo en la carpeta del siguiente proyecto sin tener que copiar y pegar el código cada vez.
   

Ahora lo único que nos falta es asociarlo a nuestro archivo .html, lo que hacemos a través de la etiqueta <script>, colocando entre las etiquetas <head> y </head>:

Código :

<script type="text/javascript" src="scripts/external_links.js"></script>

En este caso asumo que el archivo está dentro de una carpeta llamada “scripts”, que está en la raíz del sitio, si lo guardas en un sitio diferente, debes cambiar la ruta por la tuya.

¡Y eso es todo! Espero que les sea de ayuda

Por razones de usabilidad, es recomendable al menos advertir al usuario que los links se abrirán en una ventana nueva, o darle la opción de abrirlo también en la misma ventana, si así lo desea.

Nota Importante: Existe actualmente una discusión respecto a si ésta y otras técnicas utilizadas con el mismo propósito no son más que una simple "trampa" para hacer que un código "inválido", valide en XHTML Strict. No voy a exponer aquí las razones por las que considero que esta técnica es válida -en tal caso, ya hice eso en mi blog (valga el spam)- porque no es de eso de lo que se trata este tip. En último caso recomendaré lo de siempre: No tienes porque fiarte sin más de lo que digo, investiga, aprende y saca tus propias conclusiones; quizá no sean verdad, pero al menos serán tuyas.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.