[JS] Abrir enlace en ventana nueva cumpliendo los estándares Xhtml/Html estricto

Venga va, que hace mucho que no pongo nada de programación web :D.

Cuando insertas un enlace en HTML su comportamiento por defecto es que se abra en la ventana actual, si queremos cambiar ese comportamiento, sólo hay que poner el atributo target=”_new” en el enlace y se nos abrirá en una ventana nueva:

<a href="http://www.xhiena.net" target="_new">Xhiena.net</a>

Lo mismo si estamos trabajando con frames, si queremos que un enlace abra la pagina en un frame especifico, en vez de _new ponemos el nombre del frame.

Todo eso esta muy bien, pero sólo cumple los estándares transicionales. Si estamos montando una pagina en con estandar estricto (que, personalmente pienso, es como se deberían hacer todas las webs) no podemos usar ese atributo de la etiqueta a.

Si lo requerimos y no hay otra forma de solucionarlo (si estas trabajando con frames quítalos, ganarás mucho en accesibilidad y usabilidad) se puede usar javascript para simular el atributo target.

La forma de hacerlo consiste en:

  1. Cojer todos los enlaces.
  2. Ver su atributo rel.
  3. Cambiar su propiedad target.


1.- Cojer todos los enlaces

Esto se hace con la funcion getElementsByTagName(“tag”) de javascript, que nos devuelve un array con todos los elementos del documento con ese tag

var enlaces = document.getElementsByTagName("a");

2.- Ver su atributo rel.

para ver el atributo rel de un enlace se puede hacer con getAttribute(“atributo”)
enlace.getAttribute(“rel”)
3.- Cambiar su propiedad target.
eso se hace con .target

enlace .target="";

Una vez claras las cosas que hay que hacer y como se debe hacer, una función que cambiara todos los targets a lo rel podria ser:

function cambiarTargets(){
var enlaces= document.getElementsByTagName("a");
for (var i=0;i<enlaces.length; i++){
enlaces[i].target= enlaces[i].getAttribute("rel");
}
}

Se pueden hacer varias comprobaciones para que el javascript funcione perfectamente:

Que el cliente pueda usar la función:

if (!document.getElementsByTagName) return;

Que el enlace sea un enlace y no un ancla:
enlaces[i].getAttribute(“href”)!=””
Sólo poner target si tienen un rel especifico:

if(enlaces[i].getAttribute("rel") == "contenido"){
enlaces[i].target = "contenido";
}

Aquí os pongo una función que cambia el tag de los enlaces que tengan rel = new

function cambiarTargets() {
if (!document.getElementsByTagName) return;
var enlaces= document.getElementsByTagName("a");
for (var i=0;i<enlaces.length; i++) {
var enlace = enlaces[i];
if (enlace.getAttribute("href") && enlace.getAttribute("rel") == "new"){
enlace.target = "_new";
}
}
}

Comments

  1. Hi, cool post. I have been thinking about this issue,so thanks for sharing. I will likely be coming back to your site. Keep up the good posts

  2. Bien dicho! Bueno mejor escrito :P

  3. Su sitio es excelente, no me gustaría causar molestias pero desearía consultarte como pedirte más información acerca del tema de este artículo. Puede ser posible? Grax

Deja un comentario

Your email address will not be published / Required fields are marked *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.