En cualquier documento HTML los enlaces a menudo deben abrirse en una nueva ventana del navegador. Para ello y desde hace tiempo usábamos el atributo target de HTML con el valor _blank. En XHTML este atributo fue excluído pero se siguió permitiendo en aquellos documentos cuyo DOCTYPE fuera transicional.
El propósito es cada vez mejorar la accesibilidad en XHTML, y generar documentos con presentación y código separados de la estructura.
¿Por qué deshacernos de las nuevas ventanas?
Buena pregunta; realmente es menos confuso para el usuario si no abrimos nada en un popup. Evidentemente hay veces que tenemos que hacerlo porque lo necesitamos y otras porque el nuevo enlace tiene más sentido en otra ventana que en la misma.
¿Pero que hay de las personas con otros dispositivos? (Palm, PSP, iPhone...)
Pues ellos no pueden normalmente abrir nuevas ventanas en sus navegadores. Por lo tanto si limitamos un enlace a un popup impedimos a todos esos usuarios acceder a esos documentos.
Para evitar esto en lugar de usar un enlace con el atributo: target = "_blank" podemos hacerlo mediante javascript. Esta forma evita que personas sin (suficiente) javascript en sus navegadores puedan seguir interpretando un enlace. Así una llamada como esta:
Código :
<a href="documento.htm" onclick="window.open(this.href); return false;">Abrir en nueva ventana</a>
Puede funcionar en varios dispositivos y no limitamos la accesibilidad (¿seguro?).
Bien, en este punto es donde comienza lo que quería mostrar. Ya hablé de la necesidad de evitar javascript intrusivo en los websites. Podemos reemplazar ese evento onclick por una llamada desde un documento .js a todos los enlaces que queramos abrir en una nueva ventana. Para esto necesitamos un elemento, en este caso un atributo (en este ejemplo se llamará 'nuevaVentana').
Código :
<a href="documento.htm" rel="nuevaVentana">Abrir en nueva ventana</a>
Nota: originalmente el atributo 'rel' no admite 'nuevaVentana' porque no está dentro de las especificaciones, pero con DOCTYPE estricto pasa por el validador HTML. Si aun así eres reticente a esto puedes usar class="nuevaVentana", eso depende de tí.
Aquí viene la acción... De forma no intrusiva, mediante javascript, introduciremos a todos los enlaces del documento con este atributo una acción para que se abran en otra ventana.
Código :
function abrirEnNuevaVentana() { // obtenemos todos los elementos <a> dentro del documento var As = document.getElementsByTagName('a'); // generamos un bucle para asignar los eventos for (var i = 0; i < As.length; i++) { var el = As[i]; // comprobamos que posee el atributo rel y es igual a nuevaVentana if (el.getAttribute('rel') == 'nuevaVentana') { el.onclick = function() { // vamos a abrir una nueva ventana con la dirección del enlace (href) // y a cancelar la llamada habitual con return false window.open(this.href); return false; }; } } }
Ahora hacemos la llamada al cargar el documento para que nuestro script se cargue.
Código :
window.onload = abrirNuevaVentana;
Conclusión: cuando carguemos nuestro nuevo documento podremos comprobar cómo aquellos enlaces con rel="nuevaVentana" generan una nueva ventana.
Me disculpo por no tener mejor ilustrado el ejemplo y quizá resulta un poco abstracto, pero es que no tengo más tiempo. Este tip es algo que se convierte en habitual para cada proyecto y está interesante mirarlo.
Realmente me asombra la idea, bastante creativa y siempre "dentro de la ley".
Todas las cosas se pueden hacer de la forma correcta, solo hay que pensar un poco(¿poco?). Por:meduza_blog
No se pero es más divertido así, no? Además, podemos seguir en la línea o intentar hacerlo mejor cada vez, a mí me aburre la rutina, a quien no? Por:frenadoll
Porque estoy aburrido y me gusta joderle la vida a los fans de otras librerias. Tu script con jQuery.
Tu modo no interfiere con el DOCTYPE? supongo que no porque es javascript aplicado luego de la carga, pero me gusta la opcion
Sin embargo, este es el script con MI librería favorita:
Código :
window.addEvent('load', function(){ var As = document.$ES('a'); As.each( function(el) { if (el.getProperty('rel') == 'newWindow') { el.onclick = function() { this.setProperty('target','_blank'); } } }); });
Me gusta el modo en que jQuery trabaja con los atributos, es más corto. A mi me gusta mootools por la versatilidad tan enorme que tiene. Ahora pasare a ver jQuery de nuevo para no pecar de ignorante Por:frenadoll
perdon esta linea var As = document.$ES('a'); es $ES('a').each directamente, mas corto Por:frenadoll
Muy buenas! Llevo varios intentos para abrir una nueva ventana de una determinada medida desde un archivo en flash con varios codigos, pero ninguno me ha resultado.
Alguien me podria explicar que es lo que habria que hacer exactamente???
Gracias de antemano y saludos! Por:moodo_blog
Usas el método window.open(); de javascript y luego lo vinculas con ExternalInterface de AS. Por:NEO_JP
El externalInterface de As la verdad que no tengo ni idea de que se trata... puedo abrir otras páginas pero no con el tamaño que yo quiera...
