Formularios y enlaces dirigidos a ventanas

Introducción

Este artículo pretende mostrar la utilización correcta de las ventanas "popup", ya que la forma que se considera correcta según los artículos que listo a continuación, 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:

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

Voy a dar en un principio una explicación sencilla de comprender 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í yo mismo. También 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 podria 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 URI. 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.

Otros enlaces relacionados

Para quien desee más información: