9 de 2009
Como crear ventanas con JavaScript usando el objeto Window
Tutorial JavaScript: Crear ventanas JavaScript usando el objeto Window
Esta vez daré una breve explicación de lo fácil que es generar ventanas JavaScript usando el objeto Window (ventana), a dichas ventanas les podemos definir un ancho, alto, tamaño, título de la ventana, o cargar un arhivo dentro de ella.
En JavaScript, es el objeto Window el que define sobre qué ventana estamos trabajando. Las funciones que se usan para generar ventanas y trabajar con ellas, son:
- window.open() – Abre una nueva ventana.
- window.close() – Cierra una ventana (de forma predetermiada cierra la ventana actual).
Sintaxis: window.open('Archivo-a-abrir', 'Nombre-de-la-ventana', 'propiedades');
Notas importantes:
- A pesar de que el objeto se llama Window (con W mayúscula), al usarlo dentro de una función JavaScript se usa window (con minúscula).
- En los navegadores más recientes, ya no es posible deshabilitar la barra de estado ni la barra de direcciones, esto e debido a que los phishers se beneficiaban con esa característica para ocultar la dirección real donde estaban los visitantes.
- Preferentemente, la función se debe llamar usando eventos javascript (onclick, onmouseover, etc…), de lo contrario, el navegador podría tomar la ventana como elemento emergente y detener o bloquear su ejecución.
- Los documentos que abras con la función window.open deben existir (en tu web o puede ser una página externa), de lo contrario JavaScript generará una ventana en blanco o recibirás un error 404 de que no existe la página que intentas abrir.
window.open admite las siguientes propiedades o métodos:
- toolbar=[yes|no] – Muestra u oculta la barra de herramientas del navegador
- location=[yes|no] – Muestra u oculta la barra de direcciones del navegador
- directories=[yes|no] – Muestra u oculta una barra de favoritos
- status=[yes|no] – Muestra u oculta la barra de estado del navegador
- menubar=[yes|no] – Muestra u oculta la barra de menús (arhivo – editar, etc…)
- scrollbars=[yes|no] – Muestra u oculta las barras de desplazamiento
- resizable=[yes|no] – Define si la ventana podrá ser redimensionada una vez creada
- width=XXX – Define el ancho de la ventana en pixeles, ejemplo: width=600
- height=XXX – Define el alto de la ventana en pixeles, ejemplo: height=400
- left=XX – Define a cuantos pixeles del lado izquierdo de la pantalla se generará la ventana
- top=XX – Define a cuantos pixeles desde la parte de arriba de la pantalla se generará la ventana
Ejemplos de uso de window.open() y window.close():
Ejemplo 1: Botón HTML, al dar click se abre el arhivo archivo.html en una ventana de 600×400 px.
<input type="button" name="Boton" value="Abrir Ventana"
onclick="window.open('archivo.html', 'Ventana JavaScript', 'toolbar=no, resizable=no, width=600, height=400, scrollbar=no, status=no')" />Ejemplo 2: window.open dentro de una Función que abrirá ventanas con la misma característica:
<script type="text/javascript"><!--
function nuevaVentana(ventana) {
window.open(ventana,"Ventana JavaScript","toolbar=no, resizable=no, width=800, height=400, scrollbar=no, status=no");
return false;
}
//--></script>
Podemos llamar a la función anterior desde distintos objetos de la siguiente forma:
<a href="#" onclick="return nuevaVentana('reportes.html')">Ver reportes del mes</a>
<input type="button" name="algo" onclick="return nuevaVentana('eventos.html')" value="Ver calendario de eventos" />
<img src="una-imagen.jpg" alt="imagen" onclick="return nuevaVentana('otra-imagen.jpg')" />Ejemplo 3: Definir nosotros mismos el contenido de la ventana generada con window.open:
<script type="text/javascript">
function AbrirVentana() {
MiVentana = window.open("","Ventana JavaScript","toolbar=no, status=no, top=50, left=50, width=700, height=500");
MiVentana.document.write('<html>\n<head>\n<title>Esta es una ventana JavaScript</title>\n</head>\n');
MiVentana.document.write('<body>\n<div style="text-align:center">');
MiVentana.document.write('<h1>Este es un ejemplo de ventana generada con JavaScript</h1>\n');
MiVentana.document.write('Aqui puede ir el contenido que desees<br>\n<input type="button" name="cerrar" value="Cerrar" onclick="javascript:window.close()">');
MiVentana.document.write('</div>\n</body>\n</html>');
MiVentana.document.close();
}
</script>
Y podemos llamar a la función desde cualquier objeto, en este ejemplo, un botón:
<input type="button" name="Abrir" value="Click para abrir una ventana" onclick="AbrirVentana()">Ejemplo de una página que usa ventanas generadas por javascript:
En esa página, las imágenes grandes se abren en ventanas generadas por JavaScript al dar click sobre las imágenes pequeñas.
Espero que esta información les sea útil, y si tienen cualquier duda, comentario, o si desean agregar información, pueden dejar una respuesta.
Saludos a todos desde México, Dasumo.
