Cómo crear una ventana pop-up (I)
Si queremos usar la misma función para abrir la ventana más de una vez con distintos documentos cargados dentro de ella podemos agregarle una variable a la función que le pasaremos como argumento cuando la llamemos.
function ventanaNueva(documento){
window.open(documento,'nuevaVentana','width=300, height=400');
}
Y al llamar a la función desde los distintos botones le pasamos el dato como parámetro.
Botón 1
<input type="button" value="Abrir ventana"
onclick="ventanaNueva('pagina1.html')" />
Botón 2
<input type="button" value="Abrir otra ventana"
onclick="ventanaNueva('pagina2.html')" />
Podemos usar la misma función para que, además, cada ventana que sea abierta desde distintos botones tenga dimensiones distintas. Le enviaremos los valores que queramos pasados como argumentos a la función y haremos una concatenación para crear la cadena de atributos.
function ventanaNueva(documento,ancho,alto){
window.open(documento,'nuevaVentana','width=' + ancho + ', height=' + alto);
}Y al llamar a la función desde los distintos botones le pasamos los datos de ancho y alto como parámetros.
Botón 1
<input type="button" value="Abrir ventana"
onclick=" ventanaNueva('pagina1.html', 300, 400)" />
Botón 2
<input type="button" value="Abrir otra ventana"
onclick=" ventanaNueva('pagina2.html', 420, 550)" />
Si por alguna razón una vez abierta nuestra ventana necesitamos
hacer algo con ella desde Javascript debemos de poder referirnos a ella
de algún modo. Para eso está el segundo parámetro de
la función open() que define el nombre de la ventana;
en el caso del ejemplo que hemos estado usando la ventana se está
llamando nuevaVentana aunque podríamos haberla llamado
vladimir o leporcia.
Si una vez abierta quisiéramos hacer algo con ella, como por ejemplo
cerrarla usando el método close() mediante otro botón
nos referiríamos a ella por el nombre que le hayamos asignado al
momento de crearla.
onclick="nuevaVentana.close()"
Podemos enviar otra variable más como argumento a nuestra función del ejemplo para asignar distintos nombres a cada ventana que abramos desde un botón diferente. Con eso lograremos que se abran ventanas distintas, algo que no sucede si cada vez que llamamos a la función nos crea la ventana nueva con el mismo nombre, como ha estado haciendo la función del ejemplo hasta ahora.
function ventanaNueva(documento,ancho,alto,nombreVentana){
window.open(documento, nombreVentana,'width=' + ancho + ', height=' + alto);
}
Botón 1
<input type="button" value="Abrir ventana"
onclick="ventanaNueva('pagina1.html', 300, 400, 'ventana1')"
/>
Botón 2
<input type="button" value="Abrir otra ventana"
onclick="ventanaNueva('pagina2.html', 420, 550, 'ventana2')"
/>
De esta forma cada botón abrirá una ventana distinta con distintos
documentos cargados en cada una de ellas.
La función tal y como estaba antes abría los distintos documentos desde los diferentes botones cargando documentos diferentes pero los abría en la misma ventana, es decir, en ningún momento podrían haber dos ventanas abiertas a la vez dado que se estaban abriendo siempre con el mismo nombre. Si en el momento de llamar por segunda vez a la función la ventana aún se encontraba abierta (no se había cerrado) el segundo documento sería cargado dentro de esa ventana ya abierta.
Al asignar en cambio un nombre distinto para cada ventana sí puede haber más de una ventana abierta simultáneamente.
Es importante que toda la información sea accesible y se pueda acceder al recurso al que se pretende llegar y no es recomendable delegar al 100% a Javascript el acceso a un recurso. Podemos usar un link al documento que queramos mostrar dentro de nuestra ventana pop-up; de esta forma nos aseguramos de que, en el caso de estar siendo visualizada nuestra página en algún dispositivo sin soporte para Javascript, nuestro documento pueda ser llamado de forma alternativa desde este link.
La forma más simple de hacerlo usando la misma función del ejemplo es la siguiente:
<a href="pagina.html" target="ventana1" onclick="ventanaNueva
('', 300, 400, 'ventana1');"> pagina </a>
En el evento click llamamos a la función creando una
ventana pop-up asignándole un nombre ventana1 y al link
le hemos agregado un target hacia esa ventana. Así el
link al ser activado carga el documento dentro de la ventana que abrimos
desde el manejador de eventos onclick. Observar que al llamar
a la función no es necesario indicar el documento que queremos que
se cargue y lo dejamos como una cadena vacía '' (dos
comillas simples). Como en realidad lo que estamos haciendo es desviar el
destino del link a la ventana nueva no es necesario indicarle a la función
Javascript que debe cargar un determinado documento pues ya se encarga el
propio link de hacerlo.
Cómo crear una ventana pop-up (I)