Manuales
HTML básico
HTML 2ª. y CSS
Propiedades CSS
Javascript
Applets Java
CGIs

 
dHTML
Introducción
Cambiar formato
Mover capas
Mover con teclado
Visibilidad
Mover con el ratón
 
JavaScript
Barra de estado
Botones y menús
Validar formular.
Passwords
Abrir ventanas
Cargar frames
Volver atrás
Alertas
Ver navegador
Cargar imágenes
 
Creación de páginas web
© Paco Cascón Soriano
(diseño del índice tomado de la espléndida página jsworld.com)

Algunos scripts en Javascript


Apertura de una ventana dimensionable

A veces nos puede interesar abrir una nueva ventana (de las dimensiones que queramos) en la que aparezca otra página web con una información concreta, que el usuario puede cerrar, o dejar permanentemente abierta mientras navega por otras páginas.

La creación de una ventana de este tipo se consigue con la siguiente rutina de Javascript, que como siempre, se deberá colocar en la cabecera del documento HTML:
<SCRIPT LANGUAGE="JavaScript">
<!--
function nueva()
{
open('ventana.html', 'Sizewindow', 'width=300,height=350,scrollbars=no,toolbar=no')
}
//-->
</SCRIPT>

Esto hará que se cargue una ventana, cuyo contenido es un documento HTML que habremos creado, llamado ventana.html, sin barras de scroll ni de herramientas, y de unas dimensiones de 300 de ancho por 350 de alto. Se pueden variar las dimensiones, así como las partes de la ventana que queremos que se vean o no, a través de los siguientes parámetros: scrollbars (barra de desplazamiento), toolbar (barra de herramientas), directories, status (barra de estado), menubar (barra de herramientas), location (barra de direcciones), resizable (permitir que se redimensiona). En todos los casos poner =1 o 0 o bien =yes o no.

Para abrir esta ventana, en el sitio de la página que se desee, se crea un botón o un vínculo, con la siguientes etiquetas. En el caso del botón:
<form>
<input type="button" name="sizewindow" value="Pulsa para abrir una ventana" onclick="nueva()">
</form>

Que da el siguiente resultado:

En el caso del vínculo:
<A HREF="javascript:nueva()">Pangea</A>

Que da el siguiente resultado:
Pangea

En la ventana que se abrirá usaremos otro método del objeto ventana, que es el que nos permite cerrar la ventana a través de un botón:
<form>
<input type="button" name="sizewindow" value="Cerrar ventana" onclick="window.close()">
</form>


Funciones con argumentos para abrir diversas ventanas

Para poder usar la misma función en varios casos en la misma página será mejor poner argumentos que nos permitan decir cada vez que la llamemeos, la página que queremos ver.
function abrir(ventana,nombre)
{
hola=window.open(ventana,nombre,'width=300,height=200,left=300,top=100,statusbar=yes');  
//Asigna la ventana que se abre a la variable hola para poder manejarla en otros eventos
hola.focus()   //Hace que la ventana que se abre sea la activa (lleva el foco)
}

Podemos llamarla con cualquier evento, poniendo los argumentos página y nombre de ventana. Por ejemplo: onMouseOver="abrir('prueba7.htm','nueva')" para abrirla.

El haber asignado la ventana a una variable, en esta caso hola nos permite incluso cerrarla o escribir en ella. Por ejemplo: onMouseOut="hola.close() para cerrarla y hola.document.write('Hola')" para escribir en ella.

Podemos usar argumentos que permitan incluso definir el tamaño y posición:

function abrir(ventana,nombre,a,b,c,d)
{
e='width='+a+','
f='height='+b+','
g='screenx='+c+','
h='screeny='+d+','
hola=window.open(ventana,nombre,e+f+g+h);
hola.focus()
}

Podemos llamarla con cualquier evento, poniendo los argumentos página, nombre de ventana, ancho, alto, distancia desde la izquierda y desde arriba. Por ejemplo: onClick="abrir('prueba7.htm','nueva',300,200,100,200)".