MundoInformática » XHTML 1.0 Strict : there is no attribute “TARGET”

Tiempo estimado de lectura 2:13 min. rellotge

XHTML 1.0 Strict : there is no attribute “TARGET”

Validando mi página me encontré con un error muy común:

there is no attribute “TARGET”

Ya que TARGET no es un atributo válido en el XHTML estricto por lo cual necesitaba encontrar un método de solucionarlo sin perder la accesibilidad a la pagina.

Googleando encontré 2 posibles soluciones

/*utilizando window.open */
<a>CalinSoft 2008/08</a>

/*añadiendo target='_blank'; adentro de onclick */
<a>CalinSoft 2008</a>

Con esto logramos que valide correctamente, pero esto claramente se podía mejorar, por que añadiéndolo manualmente seria tedioso.

Trate de mejorarlo ya que podríamos tener muchos enlaces que necesitaríamos que se abran en otra ventana y evitando usar el evento onclick directamente en el html para esto reemplazaremos todos los atributos target="_blank" por rel="external" así.

/* antes */
<a>CalinSoft</a>

/*  ahora */
<a rel="external" href="http://www.calinsoft.com/2008/08/">CalinSoft 2008/08</a>
<a rel="external" href="http://www.calinsoft.com/2008/">CalinSoft 2008</a>
<a rel="external" href="http://www.calinsoft.com/">CalinSoft</a>

Así el código seria mas limpio, pero para que se puedan abrir en otra ventana lo hacemos mediante javascript.

/*pensado para la primera solucion
<a href="http://www.calinsoft.com/2008/08/">CalinSoft 2008/08</a>*/

function externalLinksOpen() {
  if (!document.getElementsByTagName) return false;
  var links = document.getElementsByTagName("a");
  if (links.length == 0) return false;
  for (var i = 0; i &lt; links.length; i++) {
    var relation = links[i].getAttribute("rel");
    if (relation == "external") {
      links[i].onclick = function() {
        return !window.open(this.href);
      }
    }
  }
}

/*pensado para la segunda solucion
<a href="http://www.calinsoft.com/2008/">CalinSoft 2008</a>*/

function externalLinksBlank() {
 if (!document.getElementsByTagName) return false;
 var links = document.getElementsByTagName("a");
 if (links.length == 0) return false;
 for (var i=0; i &lt; links.length; i++) {
   var relation = links[i].getAttribute("rel");
   if (relation == "external")
      links[i].target = "_blank";
 }
}

Explicación breve

Las funciones externalLinksOpen() o externalLinksBlank() trabajan de la siguiente manera.

En primera instancia verificamos que el método getElementsByTagName exista
Luego extraemos la lista de todos los elementos “a” que vendrían hacer los hipervínculos
Verificamos si la lista esta vacía
Luego listamos todos los hipervínculos que contengan el atributo rel que es lo que nos importa
Validamos que sean “external”

Para la función externalLinksOpen():

Si el Hipervínculo es externo le asignamos al evento onclick que abra en una nueva ventana

Para la función externalLinksBlank():

Si el Hipervínculo es externo le signamos “_blank” al atributo target

Para que la función javascript se carge al comienzo de la pagina

 /*utilizando el primer método*/
window.onload = function() {
  externalLinksOpen();
}

 /*utilizando el segundo método*/
window.onload = function() {
externalLinksBlank();
}

Y es así como pude lograr validar mi página con un código html limpio