Gyanamala

Gyanamala

Healing is simple

Abogado Garza

Abogado Garza

Lawyer Web Page

iCarsOnline

iCarsOnline

your online auto source!

MayaSpace

MayaSpace

Baby Patron | Web Personal

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="nofollow" 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 rel="nofollow" href="http://www.calinsoft.com/">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 onclick="window.open(this.href); return false;" 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 onclick="target='_blank';" 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

Valid XHTML 1.0 Strict

Cheque el metodo mas facil echo en jQuery

Categorizado: Desarrollo Web
Etiquetado: | | | | |

Comparte esta noticia:

Articulos Relacionados

6 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


    2

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


    Por Alex el Ene 7, 2009 Responder este comentario
    3

    El problema es que ‘external’ no es un valor valido para el atributo ‘rel’ en la especificacion XHTML (mirad en w3c.org) por lo que en el futuro podria tener problemas esta solucion.
    Creo que es mejor utilizar una clase (ej.: class=’EnlaceExterno’), lo demas esta Ok.


    Por Ruben el Ene 7, 2009 Responder este comentario
    4

    Sigo y sigo googleando para encontrar url amigable para mi pagina que esta en hosting que no acepta htacess…. alguien me dará algun dato por ahi?¿


    Por Marian el Mar 16, 2009 Responder este comentario
    6

    funciona ok!


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.