Validar atributo target XHTML Strict o HTML 4.0 Strict

Publicado por aartiles
17 de mayo de 2008 21:58 hrs.

Para los amantes de los estándares de la web os propongo un truco para simular el comportamiento del atributo “target” de la etiqueta <a>, sin dejar de cumplir el estándar HTML 4.0 Strict o XHTML 1.0 Strict.

Para ello utilizaremos el atributo rel=”external” que no incumple con los estándares. Utilizaremos un script que revisará todos los enlaces (etiquetas <a>) cuyo atributo “rel” tenga valor “external” y le asignará un evento “onclick” que cancelará el evento por defecto y abrirá la URL de “href” en una nueva ventana.

?Ver código HTML
1

<a href="http://www.equipo24.com" rel="external">Nice site developed with mootools</a>

A continuación os dejo los códigos javascript para Mootools y una solución general sin necesidad de bibiliotecas externas.

Mootools

?Ver código JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

function fix_external_links() {
	$ES('a').each(function(el) {
		if (el.getProperty('rel') == 'external') {
			el.addEvent('click', function(e) {
				e = new Event(e);
				e.stop();
				window.open(this.getProperty('href'));
			}.bind(el));
		}
	});
}
 
window.addEvent('domready', function() {
	fix_external_links();
});

Sin bibliotecas externas

?Ver código JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
11

function fix_external_links() {
	if (!document.getElementsByTagName) return;
	var anchors = document.getElementsByTagName("a");
	for (var i = 0; i < anchors.length; i++) {
		var anchor = anchors[i];
		if (anchor.getAttribute("rel") && anchor.getAttribute("rel") == "external") {
			anchor.target = "_blank";
		}
	}
}
window.onload = fix_external_links;
Share and Enjoy:
  • Digg
  • del.icio.us
  • Facebook
  • Mixx
  • Google
  • Bitacoras.com
  • E-mail this story to a friend!
  • Meneame
  • MySpace
  • Netvibes
  • Reddit
  • StumbleUpon
  • Technorati
  • Wikio
Estándares, Javascript, Mootools
Comentarios
Trackbacks por webeame.net el 18 de mayo de 2008 a las 12:39 hrs.

Truco para validar el atributo target como XHTML Strict…

AJAX24 nos propone un truco con javascript para simular el comportamiento del atributo target y no incumplir el estándar XHTML strict….

Comentario por Paco Zarabozo el 19 de febrero de 2009 a las 16:38 hrs.

La propuesta es ridícula. Absurdamente sucia. La razón por la que el atributo “target” no es validado, es simple y sencillamente porque no existe en el modo strict. El implementar un script para crear el atributo “target” en los anchors que tienen el atributo rel=”external”, es romper el modo strict desde el momento en el que se asigna “target”. Si intentaras utilizar este script en un navegador que se apegara 100% al modo strict al leer tu HTML, simplemente no funcionaría, porque como mencioné antes, el atributo “target” no es válido, independientemente de que los navegadores comunes “te lo acepten” a la mera hora.

Una solución como esta, es casi tan ridícula como la idea de no validar el HTML en lo absoluto, sino validar una página que sólo llame a un javascript que se encargará de escribir el HTML a través de document.write. ¡El validador de W3 lo aceptará sin marcar un sólo error! ¡Entonces con javascript podemos enviar HTML inválido para el modo strict! …vamos, ridículo.

La solución es en extremo sencilla. Sí utiliza Javascript, pero no necesita de ninguna inclusión de script y mucho menos de una utilización absurda de memoria para el cliente al relizar una búsqueda de elementos para asugnar atributos. ¿Quieres hacer un link realmente válido bajo el esquema strict y que abra en otra ventana? No uses “target” de forma alguna, simplemente haz tu link así:

Texto

Y estarás haciendo un link que cumple con el estándar XHTML 1.0 Strict - SIN HACER COSAS SUCIAS para “trampear” la limitación del target.

Además, la instrucción window.open es entendida por cualquier navegador, prácticamente cualquier versión, mientras que cualquiera de las opciones presentadas aquí, además de incumplir el estándar mencionado, podrían ser incompatibles con ciertos navegadores.

En fin. Tenían que se peacheperos. ;-)

Comentario por eMe el 20 de febrero de 2009 a las 09:48 hrs.

Paco Zarabozo, cualquiera diría que te han cobrado por la solución. “Tiene mucho más mérito tocar mal el piano que hablar de lo mal que alguien toca el piano”. EL post es útil, desde el momento en que nos enseña algo, y gratuíto (como todos los de aquí). A cada uno le corresponde la decisión de usarlo o no, pero es de agradecer que te regalen el conocimiento. En lugar de criticar, podrías haber comentado tu aporte de una manera constructiva y elegante, pero…

…tenía que ser flashero… ;)

Comentario por aartiles el 20 de febrero de 2009 a las 10:20 hrs.

Hola Paco Zarabozo, antes que nada deberías pasar un curso sobre como hacer un comentario en un blog sin violar todas las reglas que rigen la ética en Internet.
Tu solución, no degrada satisfactoriamente ante la ausencia de javascript, por lo que tus visitantes con javascript deshabilitado no podrán acceder a ese enlace. Igual te da lo mismo que tu web no sea accesible a todos, pero resulta que Google, Yahoo, MSN, entre otros, también son tus visitantes, y ellos sí te puedo asegurar que no entienden nada de javascript, por lo que esos enlaces no podrán ser seguidos por ellos y en consecuencia no aportaras popularidad al sitio enlazado, ni las palabras dentro del enlace ganarán peso.
Mi solución está ahí, y cada cual es libre de usarla o no.

Comentario por alejandro el 10 de marzo de 2009 a las 22:09 hrs.

que les parece la solucion de editar tu propio DTD y asignarlo a la valicacion…. esto permitira que carge en cualquier navegador?? o solo lo estoy modificando para pasar el estandar.. digo por que encontre esta solucion en un site por ahi que no cito por que no se si sea propio ponerlo aqui.

pongo la ultima nota del sitio como lo indico:

** NOTA:
Las DTD, no son más que hojas que definen los elementos que vas a usar, para que el navegador esté preparado a “leerlos”.
No soy un experto (ni mucho menos) en el tema, pero no es incorrecto hacer esto.
Lo único que se hace así, es definir tu propio juego de “instrucciones” para el xHTML (que por eso es “x”: eXtended)
A mi DTD, la he llamado: “DTD XHTML 1.0 Strict +(T/I)”, precisamente por eso, porque es la “strict” original de la W3C (tal cual), ampliada con soporte a “Target” e “Iframes” (además del “autoplay” y “volume”, de los “embed” &co)

salu2

Deja un comentario

(requerido)

(requerido)