Pop-Ups usables en Javascript

El problema

Para la mayoría de las personas resulta confuso que, al hacer click en un link o botón, la página responda lanzando una nueva ventana del navegador. Añade otra dimensión a la complejidad de la navegación. Sin embargo, muchas veces nuestro cliente necesita un pop-up, o nosotros mismos decidimos que el visitante de la página podrá manejarlo.

Más allá de las discusiones acerca de usar o no un pop-up, hay un problema que los corrompe sistemáticamente, que los hace perversos, que agrede a usuarios avanzados y principiantes en su navegación, confunde a los buscadores, y genera ruido en el código.

Este problema es que, existiendo varias formas de lanzar un pop-up con código Javascript, las más usadas son las incorrectas.

La forma correcta de lanzar una ventana pop-up con Javascript

El siguiente es el código a utilizar para lanzar un pop-up:

<a href="/index.htm" target="_blank" onClick="window.open(this.href, this.target, 'width=300,height=400'); return false;">Lanzar correctamente</a>

Simplemente cambiar en href="/index.htm" el nombre del archivo .htm que se abrirá en la ventana nueva, y cambiar los valores de width y height según el ancho y alto deseados (en pixeles).

El problema con las otras formas de lanzar un pop-up

La forma más común de lanzar un pop-up erroneamente es la siguiente:

<a href="#" onClick="window.open('/index.htm','popup','width=300,height=400')">Lanzar mal</a>

Aquí, el autor utiliza el atributo href="#" simplemente para obtener el efecto visual de la manito y el subrayado sobre el link. Luego, utiliza el evento onClick sobre ese link para abrir la ventana. Lo probamos en el navegador, y funciona perfectamente.

Sin embargo, veamos los problemas que resultan de este link.

• El 10% de navegantes que va por la vida sin Javascript jamás podrá ver el contenido que se lanza en ese pop-up. Nada ocurrirá al clickear en el link. Ese contenido quedará inaccesible.
• Los buscadores, en su recorrido indexando la Web, no podrán seguir el link y archivar la página.. Si el contenido no puede encontrarse, ¿existe?.
• Es imposible agregar el link a Favoritos (o Marcadores). "Agregar a Favoritos" toma el link desde el <a href="pagina.htm">. Si en lugar de una dirección web tenemos <a href="#">, resulta que nada se agregará a Favoritos.
• Al pasar el mouse sobre el link, no puede verse la dirección de la página a la que nos lleva, solo veremos "#" en la barra de estado.
• El navegante que haga click derecho para "Abrir en ventana nueva", es decir, desee explícitamente lanzar el contenido de ese link en otra ventana, lanzará en su lugar el contenido de la misma página que estaba viendo.
• Peor aún, quien haga Shift + Click en el link para lanzarlo en otra ventana, obtendrá no una sino dos ventanas inútiles.
• Por último, cabe recordar que existe un estándar que indica el simple <a href="..."> como la forma correcta de relacionar un documento con otro en la Web. Esta forma siempre será válida, no dependerá de ninguna tecnología de script.

Y todo puede ser peor... Existe una forma aún más perversa, que consiste en utilizar el pseudo-protocolo javascript: para utilizar el código directamente desde el href.

<a href="javascript:window.open('popups.htm','popup','width=300,height=400');">Lanzar peor</a>

Intenta hacer click derecho y Abrir en una ventana nueva. Lanzará una ventana en blanco, y de esta, con suerte, el pop-up. Una vergüenza.

Para quienes crean que pueden quedarse tranquilos confiando en que su herramienta visual lo hace bien, lamento decirles que la herramienta más usada para crear sitios web hoy en día también lo hace mal. Habrá que aprender a hacerlo a mano.

El funcionamiento de la forma correcta

<a href="/index.htm" target="popup" onClick="window.open(this.href, this.target, 'width=300,height=400'); return false;">Lanzar correctamente</a>

Vemos aquí el código para hacer correctamente el link que lanza el pop-up. Simplemente, en lugar de definir la dirección del nuevo .htm dentro de la función window.open, lo que hacemos es indicarle que desde el mismo tag (this) deberá tomar el valor del atributo href.

Con esto logramos conservar el valor semántico del href, la dirección de la página con que se vincula, y le sumamos, si el cliente dispone de Javascript, el que se abra en un popup. Pero si no dispone de Javascript, si es un navegador sólo-texto, si es un motor de búsqueda, funcionará igual.

Y al ser un link normal, con href, podrá ser agregado a Favoritos, indexado por buscadores

Finalmente, si el cliente tiene Javascript y el link se lanza como pop-up, el agregado de return false al final hará que la página inicial no de "saltos" o se cargue de nuevo luego de hacer click.

Usuarios que han visto este tema también han visto...

- Estrategias: directorio web
- Memcached: un alivio para las bases de datos
- ¿Qué es una "doorway page"?
- Gestión de contenidos desde cero
- ¿Es Ajax mejor que Flash?

- Versión imprimible de este documento

- Enviar por e-mail este documento