Al validar uno de mis scripts con el W3C Validator y siguiendo el estándar estricto (Strict) se me presento el problema de que en mis enlaces utilizaba la etiqueta target=”_blank” para que determinados enlaces se abrieran en otra página y no en la misma. Como por ejemplo:
enlace
Pero este atributo no era válido para el estándar estricto. Aunque una alternativa podría ser poner el estándar como transicional (Transitional) y conseguir que se validara, prefería cumplirlo a raja tabla con Strict y darle al coco.
Después de googlear un poco encontré un enlace interesante en EsLoMas.com donde se hablaba a lo largo y tendido de como solucionarlo a través de dos funciones de javascript (una más eficiente que la otra) y que simplemente se aplicarían poniendo a un enlace class=”external” (o otro nombre de clase que predefiniéramos).
Por ejemplo así:
enlace
Me gusto la manera de solucionarlo, aunque al utilizar Mootools creía que podría integrarlo en la página y a la vez acortar un poco más el script y con suerte ganar algo de eficiencia gracias a la librería.
Pues bien, el script original ofrecido por la página de EsLoMas.com (la versión más eficiente era la siguiente:
function prepareTargetBlank(){
var className = 'external';
var as = document.getElementsByTagName('a');
for(i=0;i
Yo propongo la siguiente solución con Mootools 1.2.1 (seguramente es mejorable, comentarios son bienvenidos):
window.addEvent('domready',function()
{
$$('a.external').each(function(el)
{
el.addEvent('click',function(ev)
{
new Event(ev).stop();
window.open(el.href)
})
})
})
Mi solución esta basada en los selectores de Mootools $$ que recogen la etiqueta a (anchor) y para cada una (each) asocio un evento click (onClick) y paro dicho evento para asociar una nueva ventana al la locación donde apunte el enlace (href).
Para los talibanes del código que quieren que el script pese menos ahorrando líneas de código pueden dejarla en una sola línea de código (aunque se ofusca bastante para luego releer el código en un futuro):
window.addEvent('domready',function(){$$('a.external').each(function(el){el.addEvent('click',function(ev){new Event(ev).stop();window.open(el.href)})})})
Si optáis por esta última versión, os recomiendo guardar un archivo nombre.js y otro nombre_edit.js con la anterior, con el fin, de que podáis tener la versión menos compacta más a mano por si queréis retocarla y para cuando la pongáis en vuestros sitios poner la versión de una línea.
Un poco mas sencillo:
var child = document.getElementsByTagName(“a”);
for(var i = 0; i < child.length; i++)
if(/^http:\/\//.test(child[i].getAttribute(“href”)))
child[i].setAttribute(“target”, “_blank”);
Salu2.
PD: habria que mejorar la expresion regular combinandola con location.hostname por ejemplo.
Esa solución no es válida, ya que estas aplicando el atributo target, que es precisamente el que queremos evitar al no se estándar estricto 😉
Todo este post se basa en evitar el atributo target, no en ponérselo a todos los enlaces, ya que solo queremos ponérselos a los de una clase específica.
Otro inconveniente es que utilizas expresiones regulares que son más lentas que los selectores.
Buena forma es cuestion de gustos, cargar mootools solo para eso.
Pero de gustos los colores :D.
Buen articulo pero tambien hay una forma sin mootools 🙂
http://www.calinsoft.com/2008/08/xhtml-10-strict-there-is-no-attribute-target/
saludos 😉
Obviamente el ejemplo es para utilizarlo en webs que usan mootools, ya que cargar todo (son 18 kb de core), no es rentable solo para esto.
Aún así, las funciones que propones son bastante parecidas a la de la web EsLoMas y no utilizar selectores para recoger la etiqueta a (anchor) esta bastante penalizado en eficiencia (ya que el DOM es mucho más rápido que los bucles for).
Por otro lado también limita a que utilizas el atributo rel (utilizado para nofollow) y tendrías que elegir poner uno u otro (ya que los valores para buscadores no se tendrían en cuenta).
Porque al poner ambos daría el siguiente error al validar:
duplicate specification of attribute “rel”
rel=”nofollow” rel=”external”>
Aún asi es otra alternativa a tener en cuenta, aunque como ya digo se puede mejorar.
Tienes razon tiene sus pro y sus contra, con respecto a rel=”nofollow” depende mucho en que sistema de gestion estes. en wordpress tengo un script en php que controla todos los enlaces que no son de mi web que se agrege el atributo rel=”external” se podria cambiar por rel=”nofollow” y el asunto estubiera resuelto.
Como te decia hay una gran variedad de soluciones solo es adecuarse .
Gracias por tu critica 😉
Si buscas evitar target=â€_blank†; por migrar a XHTML lo mejor es usar onclick=”window.open(this.href); return false;” lo cual permite mejor manipulacion sobre las propiedades de la ventana, a diferencia de target que el navegador decide si pone una pestaña nueva en vez de una ventana, que es lo que se busca.
Un saludo.
scape@
KTP…C