Estás en Inicio / Editorial / Javascript

23.02.2006

Formularios y enlaces dirigidos a ventanas

Por Pepe Molina | 23,275 Lecturas
Archivado en: Javascript

A través del presente artículo aprenderemos la correcta utilización de las ventanas popup, pues la forma que considerabamos correcta, según algunos artículos publicados no lo es del todo.

Incluso se afirma que son formas semánticamente correctas, no voy a juzgar si está bien o mal empleado el uso de esas palabras, tan solo voy a incluír un enlace a un artículo de wikipedia, sobre “Semántica”.

En principio podría decir simplemente que la forma correcta es la que se puede ver en un mensaje de los foros del web que yo mismo escribí:. Abrir enlace en un popup (me refiero a la primera de esas formas), pero he notado que siguen existiendo dudas, tal como se puede deducir de este otro mensaje: Hay que rectificar las FAQS

Existen varias páginas en donde se explica esa forma de enlazar:

• http://www.nosolousabilidad.com/articulos/popups_javascript.htm
• http://www.sitepoint.com/article/perfect-pop-up
• http://www.accesibilidad.info/2005/02/28/popup_de_javascript_accesible/
• http://www.alistapart.com/articles/popuplinks/
• http://www.jlvelazquez.net/accesibilidad/popups.asp

Y… ¿Por qué afirmo que no es correcto?

Para iniciar daré una explicación sencilla basada justamente en la semántica. Si usamos un enlace o vínculo a otra página, es evidente que pensamos que ese vínculo se puede realizar, pero el usar la sentencia return false (asociado al evento click de ese enlace) estamos dando la orden de cancelar el enlace o vínculo. En resumen, usando un enlace queremos expresar “enlace a”, y usando return false estamos expresando “no enlace”.

Podríamos pensar entonces que no debería existir ese tipo de cancelación, pero la verdadera razón de existencia es para confirmación o validación, tal como explicaré más adelante.

Describiré ahora la forma correcta, ayudándome de la similitud entre enlaces y formularios. La verdad es que son muy pocas las veces que se plantea el envío de un formulario hacia un popup, pero es posible, y está registrado en las FAQs javascript del mismo foro: Submit a una ventana emergente (popup), que también escribí. Además he encontrado un mensaje precedente: Un consejo, una idea, por favor.

Forma correcta

El enlace a un popup se debe hacer como cualquier enlace, usando el atributo href…, y para enviar formularios se utiliza el atributo action (en el primer caso se usa la etiqueta “a” y en el segundo “form”).

Para que el soporte destino (tanto de los enlaces como de los formularios) sea otra ventana, debe definirse el atributo target. Existen nombres estándar de algunas ventanas como _self, _blank, _top, _parent. Pero también se puede dar un nombre arbitrario, y esos es lo que debemos hacer.

Y ahora viene lo más importante… “el popup”…

Tanto formularios como enlaces, ofrecen un sistema para confirmar/cancelar la ejecución y que son muy parecidos. Usando un valor lógico con el evento asociado: submit para formularios y click para enlaces, de manera que se puede confirmar la acción asignando el valor lógico true, y cancelarla con false.

Dicho esto, voy a mostrar 2 formas correctas de formulario y enlace (aún sin usar ventanas):

Enlace:
<a
	href="destino.html"
	onclick="return confirm('Desea enlazar con:\n' + this.href)">
	...
</a>
Formulario:
<form
	action="destino.html"
	onsubmit="return confirm('Desea enviar formulario a:\n' + this.action)">
	...
</form>

Nótese la similitud de los dos ejemplos… y si a ambos le añadimos un atributo target arbitrario: target=”popup”, seguirá teniendo la misma similitud: un enlace que se confirma (también podría validarse) con una función asociada al manejador de evento onclick, y un formulario que igualmente se confirma con su evento asociado (submit).

La verdad es que la confirmación la podemos omitir y en su lugar, ¿qué pasaría si abriésemos una ventana
en blanco, de nombre popup…? Recuérdese que hemos puesto un atributo target=”popup”…

Enlace:
<a
	href="destino.html"
	target="popup"
	onclick="window.open('', 'popup', 'width = 200, height = 100')">
	...
</a>

Formulario:
<form
	action="destino.html"
	target="popup"
	onsubmit="window.open('', 'popup', 'width = 200, height = 100')">
	...
</form>

Cuando se activa el enlace (click), antes de enlazar se chequea el evento asociado por si hubiese que validar/confirmar, pero en vez de eso está la orden de abrir la ventana popup… sin URL. Entonces se abre esa ventana y luego se enlaza, pero al tener definido el atributo target, ese enlace se hace a una ventana que debe llamarse popup, y como es parte del juego de ventanas activas, allí se realiza. Con el formulario el razonamiento es el mismo.

Una última observación

Otra cosa que no hemos considerado es el bloqueo de ventanas emergentes desde la configuración de los navegadores. Si bien en estos casos algunos navegadores abren una ventana nueva, la verdad es que no debería ser así…

Con los siguientes códigos para enlazar:

<a
	href="index.php"
	target="v"
	onclick="window.open('', 'v', 'width=300,height=200');" >
	...
</a>

<a
	href="index.php"
	target="v"
	onclick="window.open(this.href, this.target, 'width=300,height=200'); return false" >
	...
</a>

probados en los navegadores: “explorer”, “mozilla” y “opera”, se han abierto correctamente las ventanas en los dos primeros, pero en el tercero la ventana fue bloqueada con ambos códigos, pero solo a enlazado en la ventana activa el código sin cancelación (primero). Supongo que este último comportamiento es el correcto cuando se bloquean los popups (lamento no disponer de todos los navegadores para hacer pruebas).

Y teniendo javascript desactivado (otra de las posibilidades que ofrecen los navegadores), ambos códigos
también funcionan correctamente.

Califica esta nota:

(4 votos, promedio: 3 de 5)

 Loading ...

• Todos los editoriales
• Aspectos técnicos
• Desarrollo Web
• Diseño
• Negocios
• Principiantes
• Navegando
• Semblanza
• Enviar colaboración

• Todas las notas
• Eventos
• Enviar colaboración

• Por países
• Por temática
• Sugerir empresa

• Todos los foros
• Diseño web
• Programación web
• Negocios web
• Temas generales
• Compartiendo
• Admistrando sitios
• Seguridad y Redes
• Archivo

• Acerca de
• Preguntas frecuentes
• Créditos
• Contacto

• Suscribirse
• Archivo de boletines

• AmigoMensajero
• Hostigg
• Hostigg (en)
• 120 segundos
• Últimos Temas
• Desarrollo Web
• Cristalab
• Blogs Chapines