Creando Ventanas JavaScript (Objeto Window) 1/3

por
Tiempo de lectura: 2 minutos

Buenas tardes,

Hoy os voy a explicar un poco que es el objeto window en JavaScript, las propiedades que tiene y todo lo que podemos jugar con el para crear ventanas (windows).

¿Qué representa el objeto Window?

El objeto window representa una ventana en el navegador, y es el elemento raíz de la estructura de objetos de cada pagina HTML.

Tiene definidos una serie de eventos: onblur, ondragdrop, onerror, onfocus, onload, onmove, onresize, onunload.

Y también, los siguientes atributos y métodos, los podéis revisar en el siguiente enlace Objeto Window JavaScript

Lo primero que os voy a mostrar en este tutorial es como podemos abrir una ventana pulsando un botón que hemos creado en nuestro documento html.

<html>

<head>
    <script>
        function abreNuevaVentana(nombreVentana) {
            // abrir una nueva ventana con el nombre pasado como parámetro
            // no se especifica una URL 
            miVentana = open("", nombreVentana, "width=500,height=400,status=yes,toolbar=yes,menubar=yes");
            // Abre la corriente de datos del documento para escribir 
            miVentana.document.open();
            // Crea el documento
            miVentana.document.write("<html><head><title>Ejemplo de creacion de ventanas para DevCodeLight");
            miVentana.document.write("</title></head><body>");
            miVentana.document.write("<h1>Creando ventanas con contenido en el documento</h1>");
            miVentana.document.write("<p>&nbsp;</p>");
            miVentana.document.write("<p>El contenido es din&aacute;mico, y es un ejemplo para <a href='https://devcodelight.com/'>devcodelight.com</a></p>");
            miVentana.document.write("</body></html>");

            // cierra la corriente de datos del documento 
            miVentana.document.close();
        }
// -->
    </script>
</head>

<body>
    <form><input type=button value="Abrir ventana" onClick="abreNuevaVentana('nueva')"></form>
</body>

</html>

Os muestro el funcionamiento a continuación:

creando ventanas con Objeto window de javaScript

Como veis, al pulsar en abrir ventana, nos crea la nueva ventana con el documento y contenido que hemos ido creando, se puede cerrar pulsando el la cruz como cerraríamos cualquier ventana. Pero en el síguete tutorial os enseñare como cerrar esta propia ventana que hemos creado con un botón creado por nosotros.

Espero que os guste, os sirva, y lo disfrutéis. 🙂

Post Views: 14

2 comentarios en «Creando Ventanas JavaScript (Objeto Window) 1/3»

  1. Pingback: Creando Ventanas JavaScript (Objeto Window) 2/3 – Dev{Code}Light
  2. Pingback: Creando Ventanas JavaScript (Objeto Window) 2/3 – DevCodeLight

Deja un comentario