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");
}
