Como crear ventanas con JavaScript usando el objeto Window

Tutorial JavaScript: Crear ventanas JavaScript usando el objeto Window.

JavaScript

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 podremos definir un ancho, alto, tamaño, título de la ventana, o cargar un arhivo o página externa 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:

  1. 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).
  2. 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.
  3. 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.
  4. 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.

[code]<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')" />[/code]

Ejemplo 2: window.open dentro de una Función que abrirá ventanas con la misma característica:

[code]<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 Eventos" />
<img src="una-imagen.jpg" alt="imagen" onclick="nuevaVentana('otra-imagen.jpg')" />[/code]

Ejemplo 3: Definir nosotros mismos el contenido de la ventana generada con window.open:

[code]<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>');
MiVentana.document.write('\n</head>\n<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');
MiVentana.document.write('<input type="button" value="Cerrar" onclick="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="Abrir una ventana" onclick="AbrirVentana()">[/code]

Ejemplo de una página que usa ventanas generadas por javascript:

https://www.dasumo.com/gdrive/

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.

Temas Relacionados:

  1. Validar Correo Electrónico con JavaScript y expresiones regulares
  2. Expresión Regular para validar URLs con JavaScript
  3. JavaSript: Usar target _blank en XHTML 1.0 Strict y XHTML 1.1
13 Comentarios

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *