 |
|
|
|
|
|
Portada | Monotemáticos | Secciones | Desarrolladores | Comunidad | Servicios | Servicios profesionales | RSS | |
||
|
||||
|
|
|||
 |
|
 |
||
|
||||
Apertura y configuración de popups con javascript
Este artículo te enseñará en profundidad como abrir ventanas secundarias y configurar su forma.
01/1/70 - En determinadas ocasiones es muy útil abrir un enlace en una ventana secundaria, es decir, una ventana aparte que se abre para mostrar una información específica. Algunas ventajas de abrir un enlace en una ventana secundaria pueden ser que:
- El usuario no se marcha de la página donde estaba el enlace.
- La ventana secundaria se puede configurar libremente con lo que se pueden hacer ventanas más grandes o pequeñas y con más o menos menús.
- En general, el grado de control de la ventana secundaria utilizando Javascript aumenta.
Para abrir una ventana secundaria podemos hacerlo de dos maneras, con HTML y con Javascript. Veamos cada una de ellas
Abrir una ventana con HTML
Se puede conseguir abrir una ventana secundaria muy fácilmente con tan solo HTML. Para ello podemos utilizar el atributo TARGET de las etiquetas HREF. Si ponemos target="_blank" en el enlace, la página se abrirá en una ventana secundaria. También podemos poner target="xxx" para que el enlace se presente el la ventana llamada xxx o en el frame xxx.
El enlace tendría que tener esta forma:
<a href="mipagina.html" target="_blank">
El problema de abrir una página secundaria con HTML consiste en que no podemos definir la forma de ésta ni podremos ejercer mayor control sobre élla, tal como comentábamos entre las ventajas de abrir una ventana secundária con Javascript. La ventana que se abre siempre será como el usuario tenga definido por defecto en su navegador.
Abrir una ventana con Javascript
Para abrir una ventana con Javascript podemos utilizar la sentencia window.open(). No pasa nada por que no conozcas Javascript, puesto que es muy sencillo utilizarlo para este caso. Vamos a ver paso a paso cómo abrir una ventana secundaria utilizando Javascript.
1. Sentencia Javascript para abrir una ventana
La sentencia es simplemente la función window.open(), lo más complicado es saber cómo utilizar esa función, pero ahora veremos que no reviste ninguna complicación.
La función window.open() recibe tres parámetros, que se colocan dentro de los paréntesis, de este modo:
window.open(URL,nombre_de_la_ventana,forma_de_la_ventana)
Veamos rápidamente cada uno de estos parámetros por separado.
URL: representa el URL que deseamos abrir en la ventana secundaria, por ejemplo http://www.desarrolloweb.com
nombre_de_la_ventana: es el nombre que se le asigna a esta ventana para dirigir enlaces con el atributo target del HTML
forma_de_la_ventana: se indica el aspecto que va a tener la ventana secundaria. Por ejemplo se puede definir su altura, anchura, si tiene barras de desplazamiento, etc
Veamos un ejemplo de sentencia Javascript completa para abrir una ventana secundaria:
window.open("http://www.desarrolloweb.com" , "ventana1" , "width=120,height=300,scrollbars=NO")
Esto quiere decir que abra la página inicial de desarrolloweb.com en una ventana secundaria a la que vamos a llamar ventana1. Además, la ventana será de 120 pixels de ancho, 300 de alto y no tendrá barras de desplazamiento.
Una aclaración adicional, si después de abrir esa ventana colocamos otro enlace en la página que abría la ventana cuyo atributo target está dirigido hacia el nombre_de_la_ventana (en este caso ventana1), este enlace se mostrará en la ventana secundaria.
2. Función que abre una ventana
Lo más cómodo para abrir una ventana es colocar una función Javascript que se encarge de las tareas de abrirla y que reciba por parámetro la URL que se desea abrir.
El script es sencillo, veámoslo a continuación:
<script language=javascript>
function ventanaSecundaria (URL){
window.open(URL,"ventana1","width=120,height=300,scrollbars=NO")
}
</script>
3. Colocamos un enlace
Este enlace no debe estar dirigido directamente a la página que queramos abrir, sino a la sentencia Javascript necesaria para abrir la ventana secundaria. Para ejecutar una sentencia Javascript con la pulsación de un enlace lo hacemos así:
<a href="javascript:sentencia_javascript_para_abrir_la_ventana">
4. El enlace llama a la función que abre la ventana
Ahora Veamos cómo quedaría todo ese enlace en la página.
<a href="javascript:ventanaSecundaria('http://www.desarrolloweb.com')"> Pincha en este enlace para abrir la ventana secundaria</a>
Que da como resulado:
(En la página que vayamos a colocar este enlace deberíamos tener el script que hemos hecho anteriormente que contenía la función para abrir la ventana.)
Hay que fijarse que las comillas simples que se colocan para definir el URL que se pasa como parámetro de la función ventanaSecundaria(). Son comillas simples porque el href del enlace ya tiene unas comillas dobles, y dentro de comillas dobles siempre se han de utilizar comillas simples a no ser que deseemos cerrar las comillas dobles.
Parámetros para dar forma a una ventana
Estos atributos los puedes utilizar en la función window.open() para definir la forma que deseas que tenga tu ventana secundaria.
| Width | Ajusta el ancho de la ventana. En pixels |
| Height | Ajusta el alto de la ventana |
| Top | Indica la posición de la ventana. En concreto es la distancia en pixels que existe entre el borde superior de la pantalla y el borde superior de la ventana. |
| Left | Indica la posición de la ventana. En concreto es la distancia en pixels que existe entre el borde izquierdo de la pantalla y el borde izquierdo de la ventana. |
| Scrollbars | Para definir de forma exacta si salen o no las barras de desplazamiento. scrollbars=NO hace que nunca salgan. Scrollbars=YES hace que salgan (siempre en ie y solo si son necesarias en NTS). |
| Resizable | Establece si se puede o no modificar el tamaño de la ventana. Con resizable=YES se puede modificar el tamaño y con resizable=NO se consigue un tamaño fijo. |
| Directories (barra directorios) |
A partir de aquí se enumeran otra serie de propiedades que sirven para mostrar o no un elemento de la barra de navegación que tienen los navegadores más populares, como podría ser la barra de menús o la barra de estado.
Cuando ponemos el atributo=YES estamos forzando a que ese elemento se vea. Cuando ponemos atributo=NO lo que hacemos es evitar que ese elemento se vea. |
| Location (barra direcciones) |
|
| Menubar (barra de menús) |
|
| Status (barra de estado) |
|
| Titlebar (la barra del título) |
|
| Toolbar
(barra de herramientas) |
Abrir una ventana sin un enlace
En otras ocasiones desearemos abrir una ventana secundaria automáticamente, es decir, sin necesidad de que el usuario pulse sobre ningún enlace. En este caso, el código de la función ventanaSecundaria nos sirve también y habrá que añadir una línea de código Javascript a continuación de la función ventanaSecundaria. Esta línea a añadir simplemente será una llamada a la función que se ejecutará según se está cargando la página. Veamos como quedaría este código:
<script language=javascript>
function ventanaSecundaria (URL){
window.open(URL,"ventana1","width=120,height=300,scrollbars=NO")
}
ventanaSecundaria("http://www.desarrolloweb.com");
</script>
Queda en negrita lo que sería la llamada a la función que abre la ventana secundaria, como está fuera de una función se ejecuta según se está cargando la página.
|
Referencias: Hemos publicado un manual en DesarrolloWeb.com que explica en detalle cómo controlar ventanas secundarias. No solo abrirlas, también aprendemos a cerrarlas, comunicar entre ventanas, etc.
Control de ventanas en Javascript
También hemos propuesto crear un popup con Javascript y capas (DHTML), que evita los sistemas que bloquean ventanas secundarias, ya que no es exactamente una ventana. |
Si quieres, puedes descargarte el texto de esta ayuda técnica y los ejemplos.
ventanassecundarias.zip 6Kb
+ 2 categorias relacionadas
+ 17 comentarios (Añadir)
+ 17 comentarios no revisados
| 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.
|
+ Entrar en Scripts en Javascript
| Los comentarios de los visitantes son para ampliar la información del artículo. Cualquiera puede participar. |
| Se muestran 17 comentarios revisados |
Para ello utilizo la funcion setTimeout de javascript, que recibe como parametros la instruccion a ejecutar y el tiempo de retardo en milisegundos.
setTimeout("window.open('http://www.desarrolloweb.com','w','width=500,height=400')",6000)
Al pulsar este boton se abre una ventana con retardo de 6 segundos
Me preguntaba si podrias decirme como puede escribir la URL de manera que me busque las páginas tanto en local como cuando esta en Web.
RESPUESTA:
Si quieres que encuentre las páginas tanto en local como el la web debes escribir los caminos relativos a la página donde estás abriendo la ventana, en lugar de caminos absolutos.
La idea es que, en la URL, sólamente indiques el nombre del archivo que deseas abrir, sin especificar ningún directorio, pues me dices que todas las páginas están en el mismo directorio.
window.open("http://www.xx.com","","fullscreen,scrollbars")
RESPUESTA
Pues deberías escribir el código en cualquier lugar de la página. Pero fíjate de colocar el código en vista código y no en vista diseño, puesto que si lo haces en vista diseño saldría escrito el código en la página en lugar de no salir nada y abrir el popup, que es lo que debería pasar.
De todos modos, te indico que Dreamweaver tiene una serie de comportamientos muy útiles entre los que se encuentra la apertura de ventanas secundarias. Posiblemente te sea más sencillo utilizarlos en lugar de colocar tu mismo el código Javascript.
Gracias.....
espero me respondan pronto..gracias
<img src="/imagenes/yo.jpg" onclick="javascript: window.open('archivo.html','nombre','parametros')">
Por otra parte. el parámetro Titlebar no me funciona en local ni en internet, en la instrucción Titlebar=NO.
Gracias a Desarrollo Web por el tremendo soporte.
Jonas
A continuación describo la forma adecuada de como hacerlo:
script:
function pop(pagina,ventana,parametros){
window.open(pagina,ventana,parametros);
}
html:
<a href="pop.html" target="ventana" onclick="pop(this.src,this.target,'scrollbars=yes'); return false;">Abrir Ventana</a>
Un saludo a todos y feliz navidad.
la llamada seria:
abrir_popup("www.google.com","top=10 ,left=500 ,width=350, height=150, scrollbars=no, menubar=no, location=no, resizable=no");
y la funcion:
function abrir_popup($url,$parametros){
?>
<script language="JavaScript">
window.open("<?echo $url;?>","","<?echo $parametros;?>")
</script>
<?
}
Saludos
El mismo funciona excelentemente para html puro, pero no asi cuando se utiliza jsp pues abre la ventana y por unos segundos da la impresion de que paso un error y luego carga la pagina correctamente.
Se que la forma funciona pero el cliente que use una aplicación web y que note dicho cambio podria preocuparse pensando que hay una falla en la aplicación y causarnos un monton de problemas por dicha impresión erronea que se puede llevar el cliente.
En tal caso el problema se soluciona en la función en vez de usar this.src poner la dirección de la página. Se que eso va encontra del objetivo del de este excelente ejemplo pero a menos que alguien tenga una mejor forma de corregir este pequeño inconveniente.
Por lo demas esta pagina es excelente.
RESPUESTA
Pues simplemente pon un link en la imagen que ejecute el comando javascript para abrir el popup... algo como <a href="javascript:abrir_popup()"><img src=imagen.gif></a>
 | Añadir un comentario del artículo |
| Comentarios sin revisar |
| Entre los comentarios no revisados puede haber algunos interesantes que se hayan enviado recientemente. |
 | Ver los comentarios no revisados |
| Añadir un comentario del artículo |
| Enlaces: |
| Maestrosdelweb |
Ir arriba
Lectura recomendada  Compra este libro en Agapea, la librería urgente a domicilio. |
||||||||||||
Tienda DesarrolloWeb
