25Jun
Desarrollo frontend

_blank, rel=»external» y una solución jQuery para abrir enlace en nueva ventana

Como ya sabemos XHTML Strict no permite el atributo target, así que por descontado no podemos usar target="_blank" como antaño. Sin embargo existen situaciones en las que puede ser conveniente abrir una nueva ventana.

En muchos sitios web se usa rel="external" para identificar aquellos enlaces que deben abrirse en nuevas ventanas a través de una solución en Javascript. El problema es que algunos de esos enlaces no son recursos externos sino páginas dentro del mismo dominio, lo cual resulta contradictorio.
En estos casos _blank y rel="external" son parecidos pero sustancialmente diferentes.

Independientemente de si el recurso es externo podemos añadir una clase «tblank» y mediante jQuery abrir el enlace en la nueva ventana. Este método no interfiere en la semántica del sitio web y la funcionalidad es similar.

Código en jQuery:

<script type="text/javascript">
	$(function() {
		$('a[class="tblank"]').click( function() {
			window.open( $(this).attr('href') );
			return false;
		});
	});
</script>

Con estas pocas líneas, jQuery se encarga de recopilar todos los enlaces que tengan una clase «tblank», les adjunta un evento «click», que al dispararse abre una nueva ventana con el enlace contenido del atributo «href.» Desde luego es más fácil verlo que explicarlo 😛

Enlace interno en nueva ventana:

<a href="/legal" class="tblank" title="Ver en nueva ventana la nota legal">nota legal</a>

Enlace externo en nueva ventana:

<a href="http://aurea.es" class="tblank" rel="external" title="Abrir en nueva ventana aurea.es">http://aurea.es</a>
Compartir:

12 Comments

  • lloku

    Muy buen post javi, yo he usado varias veces sistemas similares para abrir ventanas nuevas (cosa con lo que nunca estoy de acuerdo… pero ya se sabe, lo piden y hay que hacerlo), a mi me gusta poner también mediante javascript tras el enlace un aviso de que «se va a abrir en una ventana nueva», el comportamiento no es normal y el usuario debería saberlo (eso creo)

    Saludos.

    • javiaurea

      Gracias lloku,

      Yo creo que el mensaje en JS alerta en exceso, no me acaba de convencer por usabilidad. Creo que un usuario corriente puede llevarle a pensar en «o dios un error».
      Yo soy más amigo de poner el iconito de flecha vertical (el mismo que aparece en el enlace jQuery de este post).

      Por cierto, quien te ha visto y quien te ve… Tan preocupado por la accesibilidad y el front 😉

  • lloku

    Lo que pasa es que para mi la flecha representa un enlace externo mas que un enlace a una nueva ventana, y si el texto que lo indica tiene un estilo diferente a mi me parece una buena indicación.

    Muchos tenemos abiertas 1000 ventanas a la vez, y el que nos abran una nueva y lleve el foco hacia ella nos jode bastante cuando pensábamos que con un simple atrás podríamos volver a la página en lugar de tener que buscar entre todo lo abierto (de ahí que no me guste abrir ventanas nuevas, y de hacerlo a mi me gustaría que me avisaran claramente, esto debería quedar en desuso y que la gente aprendiera a calcar los enlaces con el scroll cuando le interesara).

    En cuanto a mi cambio… jajaja, que se le va a hacer, no te creas que mi mentalidad ha cambiado tanto, hace poco viendo la TV vi con incredulidad un especial sobre un coro de operados de laringe, mientras los sonidos que proferían me taladraban el oído (y que conste que no me burlo de esa gente ni mucho menos), pensé «haz las cosas para lo que estés capacitado» y me acordé de los ciegos e internet, mi idea sobre la accesibilidad no ha cambiado en exceso, pero bueno, de hacerlo, hacerlo bien… Otra cuestión es la usabilidad eso siempre me ha interesado y cada vez mas 😉

    Saludos

  • lloku

    Tenía que sacar el ejemplo del coro de operados de laringe por algún lado XD, y aún guardo muchas mas analogías políticamente incorrectas

    PD:
    Con insertar un mensaje en javascript no me refería a alerts ni nada por el estilo, me refería a insertar tras el un span (por ejemplo) aclarativo.

    Saludos.

    • javiaurea

      Definitivamente eres la alegria de este blog 🙂

      Pues si, la verdad es que pensaba que te referias a un alert. Estoy de acuerdo contigo en el span(nueva ventana)/span.

      Chao 😉

  • David Manieg

    Muy buenas, para solucionar el tema del aviso a navegantes (todos) yo utilizo title=»El recuso se abrirá en ventana nueva» y listos, nada de javascript ni alerts que son altamente molestos. Espero que os sirva.

    Saludos,
    David

    P.D. felicidades por el blog

    • javiaurea

      Muchas gracias por el aporte David. A mi personalmente no me gusta emplear el title para sugerir cosas relacionadas con la funcionalidad, prefiero destinarlo a describir brevemente el recurso.

      Me alegro que te guste el blog 😉

  • Manualidades

    Gracias soy una bloger que empiesa con esto del diseño y el codigo htm y estoy haciendo mis pininos y estaba buscando una explicacion como esta gracias

  • Implantes

    Muchas gracias, no conocía jQuery, y por lo que estoy viendo me voy a ahorrar variso dolores de cabeza gracias a esto.

  • impotencia

    Buenisimo lo de enlace interno en nueva ventana, lo estaba necesitando. Me tengo que familiarizar un poco mas con jquery todavía.

  • decabeza

    ¡Hola! estoy empezando con jQuery y la verdad que este post era todo lo que necesitaba para solucionar un error en una web en la que estoy trabajando.

    Se trataba de una capa oculta que al pulsar un enlace se mostraba y dentro de ella contenia un par de enlaces más (que no funcionaban), al añadir estas líneas va perfecto.

    ¡Muchas gracias!

    Por cierto, de inmediato te añado a mi Google Reader 🙂

Comments are closed for this post