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á pido: Alt + Mayú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ápido: Alt + Mayú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ápido: Alt + Mayú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
Comentarios
Gracias por tu comentario y por el aporte.
Publicar un comentario
Dejanos tu opinión o comentario, entre todos podemos aprender más sobre los temas que se tratan en este Blog. No te olvides seguidme en Twitter, YouTube o Facebook. Muchas gracias por tu tiempo. 👋😎