Abrir ventanas nuevas de forma no intrusiva en XHTML

En cualquier documento HTML los enlaces a menudo deben abrirse en una nueva ventana del navegador. Para ello y desde hace tiempo usábamos el atributo target de HTML con el valor _blank. En XHTML este atributo fue excluído pero se siguió permitiendo en aquellos documentos cuyo DOCTYPE fuera transicional.

El propósito es cada vez mejorar la accesibilidad en XHTML, y generar documentos con presentación y código separados de la estructura.

¿Por qué deshacernos de las nuevas ventanas?

Buena pregunta; realmente es menos confuso para el usuario si no abrimos nada en un popup. Evidentemente hay veces que tenemos que hacerlo porque lo necesitamos y otras porque el nuevo enlace tiene más sentido en otra ventana que en la misma.

¿Pero que hay de las personas con otros dispositivos? (Palm, PSP, iPhone...)

Pues ellos no pueden normalmente abrir nuevas ventanas en sus navegadores. Por lo tanto si limitamos un enlace a un popup impedimos a todos esos usuarios acceder a esos documentos.

Para evitar esto en lugar de usar un enlace con el atributo: target = "_blank" podemos hacerlo mediante javascript. Esta forma evita que personas sin (suficiente) javascript en sus navegadores puedan seguir interpretando un enlace. Así una llamada como esta:

Código :

<a href="documento.htm" onclick="window.open(this.href); return false;">Abrir en nueva ventana</a>

Puede funcionar en varios dispositivos y no limitamos la accesibilidad (¿seguro?).

Bien, en este punto es donde comienza lo que quería mostrar. Ya hablé de la necesidad de evitar javascript intrusivo en los websites. Podemos reemplazar ese evento onclick por una llamada desde un documento .js a todos los enlaces que queramos abrir en una nueva ventana. Para esto necesitamos un elemento, en este caso un atributo (en este ejemplo se llamará 'nuevaVentana').

Código :

<a href="documento.htm" rel="nuevaVentana">Abrir en nueva ventana</a>

Nota: originalmente el atributo 'rel' no admite 'nuevaVentana' porque no está dentro de las especificaciones, pero con DOCTYPE estricto pasa por el validador HTML. Si aun así eres reticente a esto puedes usar class="nuevaVentana", eso depende de tí.

Aquí viene la acción... De forma no intrusiva, mediante javascript, introduciremos a todos los enlaces del documento con este atributo una acción para que se abran en otra ventana.

Código :

function abrirEnNuevaVentana()
{
   // obtenemos todos los elementos <a> dentro del documento
   var As = document.getElementsByTagName('a');
   // generamos un bucle para asignar los eventos
   for (var i = 0; i < As.length; i++)
   {
      var el = As[i];
      // comprobamos que posee el atributo rel y es igual a nuevaVentana
      if (el.getAttribute('rel') == 'nuevaVentana')
      {
         el.onclick = function()
         {
            // vamos a abrir una nueva ventana con la dirección del enlace (href)
            // y a cancelar la llamada habitual con return false
            window.open(this.href);
            return false;
         };
      }
   }
}

Ahora hacemos la llamada al cargar el documento para que nuestro script se cargue.

Código :

window.onload = abrirNuevaVentana;

Conclusión: cuando carguemos nuestro nuevo documento podremos comprobar cómo aquellos enlaces con rel="nuevaVentana" generan una nueva ventana.

Descarga los archivos html y javascript

¿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.