Artículos
Javascript

Abrir una ventana con Javascript

03/Ene/2009

La idea de este ejemplo es ver que código JavaScript se necesita para abrir una ventana nueva cuando pinchemos sobre un enlace. De esta manera conseguiremos más funcionalidades que abriendo una nueva ventana con HTML.

Lo primero que haremos será insertar un enlace dentro de nuestra página. Mediante el elemento anchor A. La característica principal de este enlace será que se enlaza sobre la misma página, para ello utilizamos la almohadilla (#).

W3Api

Para sustituir la apertura tradicional de los enlaces capturamos el evento onClick. Dicho evento llamará a una función, pasándola la URL a abrir, que se encargará de abrir una ventana con JavaScript.

W3Api

Dentro de nuestra función y para poder abrir una ventana con JavaScript utilizaremos el método .open del objeto Window. Este método tiene la siguiente signatura:

window.open (url:string,nombreVentana:string,caracteristicas :string)

Dónde sus parámetros serían:

  • url: string – Indicamos cual es la URL de la ventana que se va a abrir.
  • nombreVentana: string – Nombre que se le va a asignar a la ventana. Este nombre es especialmente interesante cuando usamos esta ventana como frame.
  • caracteristicas: string – Proporcionamos una cadena con las características que debe de tener la ventana. Dichas características son:
    • directories – en el caso de que este activada nos mostrara la barra de vínculos.
    • height – indicaremos la altura que debe de tener la página.
    • location – nos servirá para desactivar la barra de navegación.
    • menubar – representa a la barra de menús superior.
    • scrollbars – sirve para indicar si aparecerán o no las barras de scroll.
    • status – representa a la barra de estado.
    • titlebar – representa a la barra del titulo.

A la mayoría de las características se les asignaran un «yes» o un «no» dependiendo de si queremos que aparezcan o no. Por defecto las características están a «yes».

Nuestra función JavaScript abrirVentana quedaría de la siguiente forma:

function abrirVentana(url) {
    window.open(url, "nuevo", "directories=no, location=no, menubar=no, scrollbars=yes, statusbar=no, tittlebar=no, width=400, height=400");
}

Código Fuente

Descárgate el código fuente de Abrir una ventana con Javascript
Y si te ha gustado nuestro código fuente puedes regalarnos una estrella Star

Vídeos sobre Javascript

Disfruta también de nuestros artículos sobre Javascript en formato vídeo. Aprovecha y suscribete a nuestro canal.

Test Javascript

¿Te atreves a probar tus habilidades y conocimiento en Javascript con nuestro test?

Test Javascript
Suscribir
Notificar de
guest
8 Comentarios
Recientes
Anteriores Más votados
Opiniones integradas
Ver todos los comentarios