Ejemplo de acceso a un popup

26/2/03 - Vamos a hacer un ejemplo de acceso a una propiedad del objeto window de la ventana secundaria. Se trata de la propiedad location del objeto window, que no hemos visto todavía en ejemplos. Recordemos que esta propiedad contiene el URL del documento que estamos viendo y que si la cambiamos cambia la página que se está viendo.

Nuestro ejemplo consiste en una página que va a abrir la ventana secundaria. Además la página tendrá un formulario con un campo de texto y un botón. En el campo de texto podremos colocar URLs y al pulsar el botón haremos que en el popup se muestre la URL que se haya escrito.

Al abrir la ventana guardamos la referencia en la variable miPopup.

var miPopup
miPopup = window.open("about:blank","miventana","width=600,height=400,menubar=no")

Si nos fijamos veremos que el URL de inicio de la ventana es about:blank, esto quiere decir que la ventana secundaria se inicializará con un documento en blanco. (Si escribimos about:blank en la barra de direcciones de un navegador veremos que la página se pone en blanco)

Ahora vemos el formulario que contiene el campo de texto y el botón.

<form name=formul>
<input type=text name=url size=30 value="http://">
<input type=button value="Mostrar URL en popup" onclick="muestraURL()">
</form>

No tiene nada que destacar, de modo que pasamos a ver la función que se encarga de actualizar la URL de la ventana secundaria.

function muestraURL(){
    miPopup.location = document.formul.url.value
}

La función es extremadamente simple. Sólo se accede a la propiedad location de la variable que guarda la referencia Javascript y se actualiza con lo que haya escrito en el campo de texto. La propiedad location de la variable es como la propiedad location de la ventana secundaria.

Podemos ver el ejemplo en funcionamiento aquí.

Hay un detalle poco agradable en este ejemplo. Se trata de que al trabajar sobre el formulario de la página que abrimos en primer lugar y luego actualizar el contenido del popup, se queda en segundo plano el popup con el contenido actualizado, tapado por la primera ventana. Esto es porque el foco de la aplicación lo tiene la ventana original, y por eso es la ventana que se ve delante. Sería interesante que al actualizar el contenido del popup se mostrase delante la ventana del popup actualizada. Esto se consigue utilizando el método focus() del objeto window, que coloca el foco de la aplicación en la ventana sobre la que lo invoquemos.

La función con esta pequeña modificación quedará así.

function muestraURL(){
    miPopup.location = document.formul.url.value
    miPopup.focus()
}

Sólo hemos añadido la llamada al método focus() del objeto window correspondiente al popup. Los resultados los podemos ver en esta página.

Autoría, licencia y acciones sobre este artículo

Informe de Miguel Angel Alvarez* Director de DesarrolloWeb.com Atención: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright. * Para consultas técnicas utilizar la lista de correo. Versión imprimible del artículo Enviar artículo por e-mail Publicar un comentario del artículo

Comentarios sin revisar

Añadir un comentario del artículo Entre los comentarios no revisados puede haber algunos interesantes que se hayan enviado recientemente.

 Se han encontrado 3 comentarios sin revisar

Ver los comentarios no revisados

Añadir un comentario del artículo

Enlaces:

Maestrosdelweb

  Ir arriba