Prentice Cleanning

Prentice Cleanning

Specializes in exceptional

The Word of the Lord

The Word of the Lord

BroadCasts Religious

Abogado Garza

Abogado Garza

Lawyer Web Page

Deluxe Kool Decking

Deluxe Kool Decking

Reconstruction Decking

Ago
14

XHTML 1.0 Strict : there is no attribute “TARGET”

Escrito por Carlos Montalvo hace 4 meses y 2 semanas, archivado en Desarrollo Web

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 onclick="window.open(this.href); return false;" href="http://www.calinsoft.com/2008/08/">CalinSoft 2008/08</a>

/*añadiendo target='_blank'; adentro de onclick */
<a onclick="target='_blank';" href="http://www.calinsoft.com/2008/">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 rel="nofloow" por rel="external" así.

/* antes */
<a onclick="window.open(this.href); return false;" href="http://www.calinsoft.com/2008/08/">CalinSoft 2008/08</a>
<a onclick="target='_blank';" href="http://www.calinsoft.com/2008/">CalinSoft 2008</a>
<a href="http://www.calinsoft.com/" rel="nofloow">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/" onclick="window.open(this.href); return false;">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/" onclick="target='_blank';">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

Valid XHTML 1.0 Strict

Descargar JS


Tags: , , , ,

Entradas Relacionadas:

Se Referencio:

Comparte esta noticia:

2 Valiente(s) Opinaron, falta el tuyo comenta

    1

    Es curioso que no te apareciera la entrada de mi blog cuando buscaste.

    Tuve este mismo problema hace unos días y puedes solucionarlo muy cómodamente para todos los enlaces con una sola línea, lo explico todo en mi articulo:

    http://www.shakaran.es/blog/2008/07/cumplir-estandar-w3c-con-target-blank-utilizando-mootools/

    Espero que te sirva de ayuda.

    Saludos

    PD: Yo llegue a tu blog por google, pero por la entrada de wordpress 2.6.1 XD

    Con Mozilla Firefox Mozilla Firefox 3.0.1 y Linux Linux


    2

    Si ya lo cheque buena forma, aunque creo que hay varias pero hay para escojer :D.

    Con Safari Safari 525.9 y Mac OS Mac OS X


Danos tu opinion sobre esta noticia.

CalinSoft se reserva el derecho de eliminar o editar todo comentario que considere ofensivo o difamatorio. Debatir, criticar NO ES INSULTAR.