Ventana nueva con Javascript

En este artículo quiero explicar cómo crear una ventana nueva, es decir, colocar un enlace que al clicar en ella nos abre una nueva ventana para mostrar una información específica, esto se puede hacer de varias maneras, una muy sencilla es con HTML y la otra con Javascript.

Abrir una ventana con HTML

Utilizaremos el atributo «target», este atributo forma parte de las etiquetas «href», es decir, pondremos target=»_ blank» en el enlace y así la nueva página se abrirá en una nueva ventana secundaria.

El enlace final que incorporaremos será así:

<a href="pagina.com" target="_blank">Título del enlace</a>

De todos modos con «html» no podremos especificar ni el tamaño, ni la posición de la ventana. La ventana siempre se abrirá tal y como el usuario tenga predefinido en su navegador.

Ejemplo:

<a href="http://argar.argar.cat" target="_blank">Diseño Web</a>

Ejemplo práctico del resultado final: Diseño Web

Si queremos especificar las dimensiones o la posición podemos hacerlo con Javascript.

Abrir ventana nueva con Javascript

Con Javascript utilizaremos la sentencia window.open(). En esta función podremos incorporar tres parámetros dentro del paréntesis:

• La página que queremos abrir en la ventana secundaria “url”.
• Nombre o título de la ventana secundaria.
• Dimensiones y distribución de la ventana secundaria.

Ejemplo:

window.open(URL, nombre_de_la_ventana, forma_de_la_ventana)

window.open("https://www.argar.cat", "Diseño Web", "width=300, height=200")

En este caso abriremos en una ventana secundaria la página inicial www.argar.cat y el título será «Diseño web». La ventana tendrá unas dimensiones de 300 píxeles de ancho y 200 píxeles de largo.

Una vez tengamos esto aclarado y especificado iremos completar la función que abrirá la ventana con Javascript.
Script que utilizaremos:

<script language=javascript>
function finestraSecundaria (url){
window.open(url, "nombre de la ventana", "width=300, height=200")
}
</script>

Con esto tendremos la función completa y podremos generar el contenido del enlace. En este enlace colocaremos la sentencia de JavaScript necesaria para abrir la ventana secundaria al ser ejecutado el enlace.

<a href="javascript:sentencia_javascript_per_obrir_la_finestra">

Colocamos la sentencia:

<a href="javascript:finestraSecundaria('https://www.argar.cat')">Título del enlace</a>

Por último recuerda colocar el enlace y también el «script» para que funcione correctamente.

Ejemplo final:

<a href="javascript:finestraSecundaria('https://www.argar.cat')">Diseño Web</a>
<script language=javascript>
function finestraSecundaria (url){
window.open(url, "Diseño Web", "width=300, height=200")
}
</script>

Resultado final:
Diseño Web