Ejemplo de acceso a un popup

  • Por
Veamos cómo acceder desde la ventana principal hacia una ventana secundaria para trabajar con sus propiedades y métodos.
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

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

casuma

28/5/2004
Hace falta declarar la variable miPopup dentro de la funcion

Edgar

14/6/2006
muy buen manual. solo con una duda como puedo modificar los campos texto de una ventana secundaria desde la ventana proncipal
Saludos

Juan Carlos

23/10/2006
esta muy bueno tu articulo, trate de hacerlo sin tener exito, es muy posible que hice algo incorrecto, tratando de adatarlo a mi necesidad que es muy parecido a lo publicado, te comento cual es mi necesidad, tengo una pagina, la cual mediante una foto linkeada debe abrir una ventana secundaria sin los menus ni las barras de de navegacion del explorador, ya que alli voy a colocar un flash, me podras ayudar con esto??'

Agardezco de antemano tu gentil ayuda..
Slds

Gustavo

22/2/2009
No hay manera que me funcione, lo siento pero lo he probado mil veces y a mi no me funciona, he visto el codigo fuente de vuestra página de muestra y no tiene nada de codigo html, como puede ser? Muchas gracias y excelente sitio para aprender

Nameless Samurai

14/10/2009
Excelente
Hola!
Gracias por compartir este artículo me parece genial y muy claro.
Quizas sea conveniente ampliarlo un poco para abarcar el desarrollo de páginas con .NET y su manejo con javascript

yopidoyopi

13/5/2010
agradecimiento
Gracias amigo me fue de mucha ayuda tu articulo

felipe

30/10/2016
Soy nuevo en esto!
Lo siento no me funciona, no los ejemplos refejan mas alla de un popup en blanco algo me falta?

pablo

15/11/2016
dudas sobre el ejemplo JS
Hola,
he probado el ejemplo y me <b>funciona perfectamente</b>
mi duda es sobre la funcion ¿porque no se puede acceder al <b>metodo hasFocus</b> del popup para comprobar si tiene o no el foco(mipopu.document.hasFocus()?

Espero que alguien pueda contestarme, saludos:D

Andres

28/12/2016
Ejemplo de acceso a un popup
El ejemplo lo probe pero no me funcionó, así que tuve que modificar el código y logre que me funcionara aqui les dejo el código

function muestraURL(){
miurl=document.getElementById("url").value
if (miurl=="" || miurl=="http://") {
window.open("about:blank","miventana","width=autp,height=auto,menubar=no")
}
else{
window.open(miurl,"miventana","width=autp,height=auto,menubar=no")
}

}