Enlaces y "popups" accesibles

A veces nos surge la necesidad de forzar que un enlace se abra en una ventana nueva o "popup". El problema es que debemos mantener el HTML válido para que estos enlaces sean seguidos por motores de búsqueda o puedan ser utilizados por navegadores sin Javascript.

En todos los sitios se ve el típico tutorial que dice "... utiliza el window.open() de Javascript ...". Efectivamente, hay que usarlo, pero sin obstruir ni hacer HTML chapucillas.

Vamos a presentar 3 formas de abrir un "popup", una "mala" y dos mejores.

1. Con HTML "guarrete":
   

       onclick="window.open('http://davidasorey.net',
           'popup1', 
           'height=800,width=600,resizable=1,scrolling=1')">Enlace 1

   
   Fatal. El destino de este enlace está "falseado". A veces también nos podemos encontrar algo como:
   

   <a href="void(0)">

   Esta forma de hacer los "popups" puede ser aceptable sólo si explícitamente queremos que este enlace no se siga.
   
   
2. Un poco mejor, dejando un href correcto:
   
   

   <a href="http://davidasorey.net/" target="popup2"
       onclick="window.open('', 
           'popup2', 
           'height=800,width=600,resizable=1,scrolling=1')">Enlace 2</a>
   
   

   Aquí jugamos con el atributo "target". El evento "click" abre una ventana "vacía" pero con un identificador "popup2". Cuando el navegador va a abrir el enlace, ya encuentra una ventana con este identificador y abre el enlace en esta nueva ventana.
   Es una mejora, desde luego: el enlace ya es un enlace "real" e indexable.
   
   
3. Una solución sin Javascript "inline":
   
   

   <a class="popup3" href="http://davidasorey.net/">Enlace 3</a>

   
   Obviamente, esta es la solución más limpia, pero requiere un poco más de trabajo adicional.
   Con jQuery (se puede hacer con cualquier otra librería o "framework") hay que "capturar" todos los enlaces con la clase "popup3" y alterar su comportamiento:
   

   $(document).ready(function (d) {
    $('a.popup3').click(function (e) {
     e.preventDefault();
     var href = $(this).attr('href');
     window.open(href, 
                'popup3', 
                'height=800,width=600,resizable=1,scrolling=1');
    });
   });

   
   En pocas líneas alteramos el comportamiento de todos los enlaces con la clase 'popup3'. Nos ahorramos andar escribiendo el código Javascript en el evento onclick y todo el código y control de este comportamiento está en un sólo punto.