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.

<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 Eventos" />
<img src="una-imagen.jpg" alt="imagen" onclick="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>');
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()">

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
Escrito en: Webmaster
13 CommentsLeave a comment
  • hola, traté de reproducir tu código pero no me muestra ni una sola ventana emergente, tienes idea porque? ya chequé que no tengo bloqueadas las ventanas emergentes y aún así no lo logro. Podrías ayudarme?
    Mil gracias.

  • Que tal, estoy usando las siguiente linea para abrir una ventana nueva y funciona pero al abrir esa ventana no me deja trabajar con la principal que es de donde la llame. Esto me pasa Firefox pero no asi con Chrome. ¿que puede ser?
    Agradeceria su respuesta.

    linea de codigo: window.open(url, ‘name’, ‘height=1024,width=768,toolbar=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no ,modal=yes’);

    Gracias

  • Berenice G says:

    Hola mira estoy utilizando el siguiente script para detectar el evento de cerrar de una página html:

    var goodexit = false;
    window.onbeforeunload = confirmRegisterExit;
    function confirmRegisterExit(evt) {
    if(!goodexit) {
    return “Tus datos no serán guardados!!”;
    }
    }

    Este script me pregunta si deseo o no salir de la página, si se cierra quiero que se abra una nueva ventana, como puedo adecuar window.open dentro de este código?? es posible.

    De antemano gracias por tu ayuda.

    • Hola Berenice:

      Sí se puede hacer sin embargo el WINDOW OPEN sería bloqueado por el bloqueador de ventanas emergentes en la mayoría de navegadores, pero sería algo como esto:

      if(!goodexit) {
      window.open="AQUI LOS DATOS DE LA VENTANA O VARIABLE PEVIAMENTE GUARDADA"
      return false;
      }

      Saludos.

  • Una pregunta??? Funciona en explorer 8???? Por que me sigue mostrando las barras de menu, direccion, y estatus

    Saludos…

    • Hola, los navegadores modernos ( desde IE7 o Firefox 2 ) vienen con medidas de seguridad extra, y ya no es posible ocultar la barra de direcciones, tal como especifiqué en el artículo esa técnica era muy usada para phishing, pero el resto de opciones aun son válidas.

      Un saludo.

  • Listo mejor utilize la instrucción window.showModalDialog este si me libera el espacio Saludos!!

  • Gracias Dasumo te pongo la idea del codigo en un .js

    function Abrir_ventana (nameFecha){
    var opciones=”toolbar=yes, location=yes, directories=yes,status=yes, menubar=yes, scrollbars=yes,resizable=yes, width=100, height=250,top=230, left=600″;
    window.open(“prolecCalendar.aspx?nameFecha=”+nameFecha,”_blank”,opciones);
    }
    En otra funcion con esto la cierro:
    var ventana = window.self;
    ventana.opener = window.self;
    ventana.close(“prolecCalendar.aspx”,”_self”);

    • Hola, estás usando mal la opción close().

      Puedes usar simplemente window.close() y automáticamente cerrará la ventana activa desde donde close() sea llamado, o bien, si deseas cerrar la ventana abierta desde otra ventana, se me ocurre lo siguiente:

      Especifica un nombre de ventana en lugar de usar el atributo TARGET ("_blank") y guardalo en una variable (incluso funcionaría si usas _blank), por ejemplo:

      var ventana = window.open("prolecCalendar.aspx?nameFecha="+nameFecha,"NOMBRE",opciones);
      ventana.close();

      Un saludo.

  • Tengo un problema con el window.open, jamás me libera la memoria cuando utilizo el window.close en el task manager provocando una pantalla blanca y finalmente el mensaje de error que no se encuentra el sitio, esto sucede con IE8 y IE7 con el 6 no tengo el problema.
    Si alguien sabe algo de eso estaria bien que retroalimentara.
    yair.matagarza@ge.com

    • Hola, tienes un ejemplo de como lo estás usando para poder ayudarte?

      Es probable que tengas que anteponer la variable de la ventana que has generado y usar variable.document.close() en lugar de window.close() (mira el ejemplo 2)…

      Todo depende de que método uses para generar o abrir la ventana de javascript.

  • Seria excelente si dejaras copiar el texto para probar! :S

    • Hola, gracias por la observación, se me pasó por alto que desde hace mucho usaba este script para evitar selección de texto pero ya lo voy a desactivar.

      Un saludo desde México 🙂

Leave a comment

 

     


Subir