12 de julio de 2011

Abrir una nueva ventana con XHTML Strict


A la hora de diseñar un sitio Web y validar el código HTML, utilizo el complemento del navegador Firefox: Html Validator que me indica los errores de etiquetado del HTML, que encuentra en la páginas Web que estoy diseñando, y me he encontrado el problema que cuando diseño un documento XHTML Strict que el atributo target=”_blank” de la etiqueta <a> para crear un enlace que abra una nueva ventana me lo muestra como error, porque no está reconocido el atributo target=”_blank” en un documento XHTML Strict.

Para solucionar este error podemos hacer dos cosas: usar Javascript o usar JQuery.


Si usamos Javascript podemos hacer lo siguiente:

Podemos insertar Javascript en el código HTML, pero está desaconsejado, porque se mezcla código HTML con código Javascript:

<a href="http://twitter.com/#!/Netinse" title="Twitter (Acceso r&aacute;pido: Alt + May&uacute;scula + T)" accesskey="T" onclick="window.open(this.href); return false">
    <img src="images/twitterT.png" alt="Twitter" />
</a>

Podemos crear una función Javascript:

Lo primero es, que tenemos que agregar a las etiquetas <a> el atributo rel, y le asignaremos el valor que usaremos para saber cuales son los enlaces que queremos abrir en una nueva ventana Por ejemplo:

<a href="http://www.facebook.com/pages/Netinse/234420579904952" title="Facebook (Acceso r&aacute;pido: Alt + May&uacute;scula + F)" accesskey="f" rel="external">
     <img src="images/facebook.png" alt="Facebook" />
</a>

Ahora creamos un documento *.js que hará que se abra una nueva ventana:

window.onload = nuevaVentana;

function nuevaVentana()
{
    if(!document.getElementsByTagName) return;
    var enlace = document.getElementsByTagName('a');
      for(var i = 0; i < enlace.length; i++)
      {
         var enlace_blank = enlace[i];
         if(enlace_blank.getAttribute('href') && enlace_blank.getAttribute('rel') == 'external')
         {
            enlace_blank.target = '_blank';
         }
     }
}

Después hacemos enlazamos el archivo Javascript en todas las páginas para que se ejecute con todos los vínculos que tenga el atributo rel="external":

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

Y debemos escribirlo entre las etiquetas <head> y </head>:

Por último y en mi opinión queda un código más limpio para crear un enlace que abra una nueva ventana con JQuery.

Haremos lo siguiente, nos dirigimos a entre las etiquetas <head> y </head>, y escribimos las siguientes líneas:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

<script type="text/javascript">
    $(document).ready(function()
    {
         $('a[rel="_blank"]').click( function()
           {
               window.open($(this).attr('href'));
               return false;
           });
   });
</script>

Una vez que hemos llamado a la librería de JQuery y hemos creado la función de JQuery, nos dirigimos al enlace que queremos que abra una nueva ventana y añadimos el atributo rel y en el valor escribimos por ejemplo: _blank.

El código HTML del enlace puede quedar de la siguiente manera:

<a href="http://www.youtube.com/user/Netinse" title="YouTube (Acceso r&aacute;pido: Alt + May&uacute;scula + Y)" accesskey="y" rel="_blank">
     <img src="images/youtube.png" alt="YouTube" />
</a>

Espero que os haya servido de ayuda a tod@s. Un saludo:

Antonio

2 comentarios:

  1. a> onclick="this.target='_blank'" href=destino.html">PRUEBA ESTO</a

    ResponderEliminar
    Respuestas
    1. Muchas gracias Gaueko, lo he probado y funciona.
      Gracias por tu comentario y por el aporte.

      Eliminar

No olvides dejar tu comentario y gracias por tu tiempo ;-)