Enlace que abra dos páginas

22/Nov/2006 HTML , , 4 Comentarios

Cuando estamos utilizando los enlaces HTML dentro de una página web vemos que su comportamiento natural es el de abrir la página o parte en concreto de la página sobre alguno de los marcos del navegador (misma venta, ventana padre, algún frame,...).

Mediante el lenguaje HTML nos veremos limitados a este funcionamiento. Si queremos hacer otro tipo de cosas deberemos de utilizar el lenguaje de Scripting, JavaScript. Mediante este lenguaje podremos modificar las propiedades del navegador y modificar su comportamiento. Así, podremos llevar a cabo que cuando pinchemos en un enlace, este, abra dos URL de destino, en vez de una.

Antes de empezar a explicar como hacer esto, cabe indicar que esta potencia tiene ciertas limitaciones. Ya que esto limitará la creación de páginas accesibles o destinadas a dispositivos que no interpreten el JavaScript. Como podría ser el caso de los móviles.

Pongamonos manos a la obra. La idea inicial es abrir dos ventanas con dos URLs. Para ello lo primero que tenemos que saber es como se abre vía JavaScript una ventana. Esto lo haremos mediante el objeto window del DOM de los navegadores y su propiedad .open(). Veamos la línea de código:

  1. window.open (url:string,nombreVentana:string,caracteristicas :string);

A si que lo que haremos será crear una función que realice dos llamadas al método open. Dicha función recibirá como parámetro las dos URL que queramos abrir.

  1. function abrirEnlaces(url1,url2){
  2. window.open(url1);
  3. window.open(url2);
  4. }

La función será llamada cuando pulsemos en un enlace. Para controlar esta pulsación deberemos de basarnos en la gestión de eventos. El evento a capturar será el evento onClick que reciba el enlace.

  1. <a onclick="abrirEnlaces('http://www.ayudaenlaweb.com','http://lineadecodigo.com');">
  2. Enlace que abre dos ventanas</a>

Lo que sucede es que antes de procesar el evento JavaScript, el navegador va a procesar el propio evento HTML de la página. Es por ello que deberemos de deshabilitar este mecanismo indicando que la navegación del enlace HTML es "#". Esto significa que la navegación es el mismo sitio donde te encuentras.

Quedandonos la línea de código de la siguiente forma:

  1. <a href="#" onclick="abrirEnlaces('http://www.ayudaenlaweb.com','http://lineadecodigo.com')">;
  2. Enlace que abre dos ventanas</a>

Vídeos sobre HTML


Difunde el Conocimiento

Si te ha gustado el artículo o te ha sido de utilidad, no dejes de compartirlo con tus amigos en las redes sociales... Te estaremos muy agradecidos. :-D

4 comentarios en “Enlace que abra dos páginas”

Víctor Cuervo

Jin

quisiera abrir 2 nuevas ventanas al darle solo click en el menu de anuncio si mi codigo es esta como sería para poder realizarlo.
VER ANUNCIO

Víctor Cuervo

david

hola, aunque esta muy bien explicado… no me sale 🙁
no se que he echo mal.

cuando creo una entrada en la edicion HTML de mi blog, pongo el codigo pero no se me abre nada, solo se me agrega al final de mi Url el signo “#”. El efecto que quiero lograr es que la gente pinche en este link “http://www.megaupload.com/?d=GCXL89O2”
y se le abran dos link, el de megaupload y otro mas… pero que los dos sean pestañas comunes y corrientes

gracias por la atención, saludos

Víctor Cuervo

Shack_Bloody

Exelentemente explicado, muy buen post 😉

Víctor Cuervo

Edgar

yeah

¿Algo que nos quieras comentar?

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

*

*