Abrir una ventana con Javascript

03/Ene/2009 JavaScript , , 8 Comentarios

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 (#).

  1.  
  2. <a href="#">W3Api</a>
  3.  

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.

  1.  
  2. <a href="#" onClick="abrirVentana('http://www.w3api.com')">W3Api</a><br />
  3.  

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:

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

Vídeos sobre Javascript


8 comentarios en “Abrir una ventana con Javascript”

Víctor Cuervo

hacker

muy bueno el tuto solo que deseo saber también si es posible como realizar un formulario desde una ventana emergente ya sea de javascript (‘alert’), o de jquery

Víctor Cuervo

Víctor Cuervo

Buenas,

Con un alert solo puedes mostrar texto. Si utilizas window.open puedes abrir una URL de cualquier página. Por lo cual puedes crearte una página que contenga un formulario y sea esta página la que abras con window.open.

Saludos.

Víctor Cuervo

julie

Gracias. Me salvaste, pues tambien funciona en html5, y document.href ha sido botado :'(

Víctor Cuervo

Víctor Cuervo

@Oscar,

Suena muy raro. Puedes poner tu código en los comentarios o en el foro para verlo.
De todas maneras puedes realizar una redirección con location.href http://www.w3api.com/wiki/DOM:Location.href

Espero que te sirva.

Víctor Cuervo

Oscar

HOla… compañeros.
Estoy usando Window.open() para abrir un link en otra página. Ese link lo obtengo de un servicio el problema es que cuando se ejecuta el window.open(); me antepone la url de mi sitio y no permite cargar el link que quiero direccionar.

window.open(‘http://otrositio.com’, ‘_blanck’);

en la url de la otra página me sale http://miweb.com/http://otrositio.com y me proboca el error 404 page not found.
como puedo hacer para redireccionar y que la url sea solo la que envio en el método “window.open”.

Gracias por la ayuda.

Víctor Cuervo

Feli

Buenisima la web, que bueno que la gente comparta sin interes

Víctor Cuervo

Feli

Buenisima la entrada y muy sencillo

Víctor Cuervo

luis

el metodo ‘open’ es muy valido en javascript

http://www.visitaspirata.com

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

*