Inicio DesarrolloCrear ventanas con Javascript usando el objeto Window

Crear ventanas del navegador con Javascript.

Javascript
Crear Ventanas con Javascript

Generar ventanas del navegador con Javascript es una tarea sencilla gracias al Objeto Window, son ventanas totalmente personalizables, podrás definir un ancho, alto, tamaño y título de la ventana; podrás cargar una url, arhivo, página externa o tu propio contenido HTML 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('url', 'Nombre-de-la-ventana', 'propiedades');

Curiosidades de este tutorial javascript:

  1. A pesar de que el objeto se llama Window (con W mayúscula), en una función Javascript se escribe window (con minúscula).
  2. Para crear una nueva ventana con window.open, es preferible hacerlo desde el evento javascript onclick, de lo contrario el navegador podría tomar la ventana como elemento emergente y detener o bloquear su ejecución.
  3. Las URL o documentos que abras con la función window.open deben existir (en tu web o en una página externa), de lo contrario recibirás un error 404 de que no existe la página que intentas abrir.
  4. El primer parámetro de window.open se puede omitir, en este caso Javascript generará una ventana en blanco usando como URL predeterminada la página about:blank.

Propiedades y métodos que admite window.open:

  • location=[yes|no] – Muestra u oculta la barra de direcciones del navegador. ***
  • status=[yes|no] – Muestra u oculta la barra de estado del navegador. ***
  • toolbar=[yes|no] – Muestra u oculta la barra de herramientas del navegador.
  • directories=[yes|no] – Muestra u oculta una barra de favoritos
  • 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

*** Nota: En navegadores modernos, por seguridad ya no es posible deshabilitar la barra de direcciones ni la barra de estado, esto porque los phishers utilizaban esa característica para ocultar la dirección url real a los usuarios.

Ejemplos de uso de window.open() y window.close():

  1. window.open desde el envento onclick, abre archivo.html en una ventana de 600 x 400 pixeles.
    <button onclick="window.open('archivo.html', 'Ventana JavaScript',
'toolbar=no, resizable=no, width=600, height=400, scrollbar=no, status=no')"
>Abrir Ventana</button>
  2. window.open en una función javascript, creará ventanas con las mismas características:
    <script>
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 desde distintos elementos, por ejemplo:
    Desde un enlace:
<a href="#" onclick="return nuevaVentana('reportes.html')">Reportes del mes</a>
Desde un botón:
<input type="button" onclick="return nuevaVentana('eventos.html')" value="Ver Eventos">
Al dar click en una imagen para cargar otra imagen:
<img src="imagen.jpg" alt="imagen" onclick="nuevaVentana('otra-imagen.jpg')">
  3. Insertar contenido HTML arbitrario en una ventana generada con window.open:
    <script>
function AbrirVentana() {
MiVentana = window.open('', 'Ventana JavaScript',
'toolbar=no, status=no, top=50, left=50, width=600, height=400');
MiVentana.document.write('<html>\n<head>\n<title>Ventana creada con JavaScript</title>');
MiVentana.document.write('\n</head>\n<body>\n<div style="text-align:center">');
MiVentana.document.write('<h1>Contenido generado con JavaScript</h1>\n');
MiVentana.document.write('<input type="button" value="Cerrar" onclick="window.close()">');
MiVentana.document.write('</div>\n</body>\n</html>');
MiVentana.document.close();
}
</script>
Haciendo uso de la función desde un botón:
<input type="button" value="Crear Ventana" onclick="AbrirVentana()">

Espero que la información sea útil, si tienes dudas, sugerencias o información adicional, deja una respuesta en la caja de comentarios.

Saludos desde México, DaxMX.

Nota: Tutorial actualizado desde su original publicado en dasumo.com en Agosto de 2010.

Comparte: Facebook Twitter WhatsApp Google Tumblr Reddit
Etiquetas:, , , , , , , , , ,

Relacionados

15 comentarios
  1. lily

    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.

    • Es importante que utilices el envento onclick para generar las ventanas, revisa la sintaxis, las comillas son importantes, si tienes un ejemplo del código que estás utilizando con gusto podré ayudarte de mejor manera, un saludo y gracias por tu comentario.

  2. Berenice G

    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:

      Es probale que window.open sea bloqueado como ventana emergente en la mayoría de navegadores, podrías usar location.href en su lugar, dejo ambos ejemplos:

      function confirmRegisterExit(evt) {
      goodexit = confirm('Realmente deseas cerrar la pagina?\nTus datos se perderan!!');
        if(goodexit) { // Si la pagina debe cerrarse
      // Si decides usar window.open
          window.open('pagina','nombre','opciones');
      // Usa location.href si solo quieres cargar otra URL en la misma pestaña
          location.href='http://nueva-url';
        } else { //si se permanece en la página
          return false;
        }
      }

      Saludos.

  3. marcelo

    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

    • Hola Marcelo:

      Es probable que otro script esté interfiriendo con la ventana recién generada o que se trate de un bug de firefox, tal vez ya lo han solucionado, prueba nuevamente y si sigue dando error comparte la URL del ejemplo, saludos.

  4. manuel

    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.

  5. yair

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

  6. Yair

    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.

  7. Yair

    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.

  8. 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 🙂