Finestra nova amb javascript

En aquest article vull explicar com crear una finestra nova, es a dir, col·locar un enllaç que al clicar-hi ens obri una finestra nova per mostrar una informació específica, això es pot fer de diverses maneres, una molt senzilla és amb HTML i l’altra amb Javascript.

Obrir una finestra amb HTML

Utilitzarem l’atribut “target”, aquest atribut forma part de les etiquetes “href”, es a dir, posarem target=”_blank” a l’enllaç i així la nova pàgina s’obrirà en una nova finestra secundària.

L’enllaç final que hi incorporarem serà així:

<a href="lamevapagina.com" target="_blank">Títol del enllaç</a>

De totes maneres amb “html” no podrem especificar-hi ni el tamany, ni la posició de la nova finestra. La finestra sempre s’obrirà tal i com l’usuari tingui predefinit el seu navegador.

Exemple:

<a href="http://argar.argar.cat" target="_blank">Disseny web</a>

Exemple pràctic del resultat final: Disseny web

Si volem especificar-hi les dimensions o la posició podem fer-ho amb Javascript.

Obrir una finestra amb Javascript

Amb Javascript utilitzarem la sentencia window.open(). En aquesta funció hi podrem incorporar tres paràmetres dins del parèntesi:

• La pàgina que volem obrir en la finestra secundària “url”.
• Nom o títol de la finestra secundària.
• Dimensions i distribució de la finestra secundària.

Exemple:

window.open(URL, nom_de_la_finestra, forma_de_la_finestra)

window.open("https://www.argar.cat", "Disseny web", "width=300, height=200")

En aquest cas obrirem en una finestra secundària la pàgina incial www.argar.cat i el títol serà “Disseny web”. La finestra tindrà unes dimensions de 300 píxels d’amplada i 200 píxels de llargada.

Un cop tinguem això aclarit i especificat anirem a completar la funció que obrirà la nova finestra amb Javascript.

Script que utilitzarem:

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

Amb això tindrem la funció completa i podrem generar el contingut del enllaç. En aquest enllaç hi col·locarem la sentència de Javascript necessària per obrir la finestra secundària al ser executat l’enllaç.

<a href="javascript:sentencia_javascript_per_obrir_la_finestra">

Col·loquem la sentència:

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

Per acabar recordeu col·locar l’enllaç i també el “script” perquè funcioni correctament.

Exemple final:

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

Resultat final:
Disseny web