1-Ventanas pop-up

Espacio de publicidad

"¿Pero por qué hace falta saber HTML dinámico para abrir una nueva ventana, si eso se puede hacer con el viejo y querido HTML tradicional?", dirán los iniciados. Y tienen razón, no hace falta escribir ningún script para abrir una nueva ventana, acá tenemos un ejemplo de ello.

El código HTML utilizado para abrir esa ventana dice:

<a href="nuevaventana.html" target="nuevaventana"> acá tenemos un ejemplo de ello.</a>
Como ven, abrir una ventana en HTML es muy fácil y simple. El problema es que no cumple con los requisitos que exigimos en el primer párrafo cuando queríamos poder controlar las propiedades de la nueva ventana, su ubicación y su dimensión. Para eso hace falta escribir una línea de script. Es muy fácil y muy útil:
window.open("URL","nombre","propiedades");
Este código llama al objeto "window" del Document Object Model y le asigna el método "open" (si no entendieron esta última oración quiere decir que se saltearon la primera lección, ¡vuelvan atrás y estudien!).

• El primer parámetro del método open es el de la dirección del sitio (URL). Allí es donde tienen que escribir la dirección URL que le asignan a la nueva ventana.


• El segundo parámetro es el nombre. Acá es donde deben asignarle un nombre a la ventana, de la misma manera que se lo asignaban antes con la etiqueta <a href target> (cuando usaban solo HTML). Si ustedes abren una ventana y ya hay otra ventana abierta con el mismo nombre, el documento que estén llamando va a ir a parar a la misma ventana que está abierta. Esto sirve para que la ventana abierta sea una sola, y cada vez que el usuario cliquee sobre un link y dispare un nuevo pop up, lo lea siempre en la misma ventana, y la página no se inunde de ventanas injustificadamente.


• El tercer parámetro es el de propiedades, y contiene una lista de las diferentes formas que puede adquirir la ventana. Este parámetro es opcional, pero es el que más poder le da a la línea de script, ya que nos permite definir el tamaño de la ventana, la inclusión o no de la barra de menú, su ubicación y otros elementos.

Veamos algunos ejemplos:

Este es un caso en el que se abren tres documentos HTML distintos y cada uno se abre en una nueva ventana. Clic para ver.

Ahora veamos un caso en el que se abren tres documentos HTML distintos pero en la misma ventana, ganando mucho en claridad y en orden: Clic para ver.

Habrán entendido la diferencia entre llamar documentos y abrirlos en ventanas distintas o abrirlos en la misma ventana. Perfecto, ahora tienen que aprender a hacerlo y se van a dar cuenta de lo fácil que es. En el ejemplo 1 el código decía:

<a href="#" onclick="window.open('paginax.html','ventana1')";>Si hacés click acá se abre la ventana llamada: ventana1 </a>
<br>
<a href="#" onclick="window.open('paginay.html','ventana2')";>Si hacés click acá se abre otra ventana llamada: ventana2 </a>
<br>
<a href="#" onclick="window.open('paginaz.html','ventana3')";>Si hacés click acá se abre otra ventana llamada: ventana3 </a>

window.open(‘URL’,’nombre’) . En ‘URL’ ponemos la dirección de la página que queremos llamar, y en ‘nombre’ ponemos el nombre que queremos que tenga la ventana. Si queremos abrir una ventana distinta para cada página, hacemos como está escrito en el código de arriba, que pertenece al ejemplo1: llamamos ‘ventana1’ a la primera; ‘ventana2’ a la segunda, y así con cada una (los nombres los eligen ustedes, lo importante es que cada nueva ventana tenga un nombre distinto de las demás).

Si, por el contrario, queremos llamar distintos documentos HTML a una misma ventana (como en el segundo ejemplo), vamos a hacer una breve y simple modificación en el código: en lugar de darle diferentes nombres a las ventanas, vamos a darle siempre el mismo. Entonces escribimos: window.open (‘URL’,’nombre’) . En ‘URL’ vamos a escribir otra vez la dirección del documento que queremos llamar, y en ‘nombre’ le damos un nombre a la ventana. Cuando queramos llamar otro documento, tenemos que repetir la línea de script y cambiar solamente el espacio correspondiente a ‘URL’ por la dirección del nuevo documento. El nombre de la ventana no debe cambiar. Ante la dudad, consulte el código fuente.

En los dos ejemplos que acabamos de ver, las ventanas fueron llamadas ante el evento onclick, osea, al hacer clic. Esto no necesariamente tiene que ser así. Simplemente era conveniente para mostrar el ejemplo. Los que no sepan qué es un evento pueden visitar la primera lección de este tutorial en donde se explica todo acerca de ellos.


Próxima página » 3. Cómo agregar interactividad



Terra

Comentarios publicados

Los mensajes publicados por los usuarios no sufren revisión ortográfica o de redacción alguna. Ver reglamento de aprobación.

Mensajes publicados en esta nota: 3

se nota que no chamullan, sigan enseñando a los us...(pipo) Muy buen tutorial. Se nota que está escrito por un...(Fede) Me parece muy bueno este tutorial. Este Marcos par...(Juan Pablo)