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

xhiena dice: se ha mudado a xhiena.net

Ver esta entrada en xhiena.net

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";
        }
    }
}