Main Menu

Pop-up con Javascript

Started by Uleila.com, October 23, 2006, 07:00:50 AM

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

Uleila.com

La forma correcta de lanzar una ventana pop-up con Javascript:
El siguiente es el código a utilizar para lanzar un pop-up:
Quote<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:
Quote<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.
Quote<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
Quote<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.

kazin

Andale... no sabia que habia tanto tema con los Pop-up... pensaba que era simplemente mas facil... pero bueno.. gracias por al info! Sirve para cuando quiera diseñar una web ^^...

Grax amego por la info