miércoles, 10 de marzo de 2010

Abrir un Pop-up con Javascript de forma automática y por enlace


Los Pop-up o ventanas emergentes son cosas del pasado de la internet, su abuso ocasionó que se desarrollara software especialmente diseñado para detener su apertura, que entre otras cosas permitió el boom de Firefox.

Las ventanas emergentes fueron el reino de Internet Explorer, lo que para Firefox fue la Web 2.0.

Todavía hay en la actualidad personas que usan Pop-ups para lanzar sitios web enteros, por una parte para dar la impresión de ser una aplicación y por otro, controlar al usuario y lo que descarga, aunque dicho sea de paso, ya son muy pocos los que deciden hacerlo, por la pérdida de visitas que representan.

Una persona que los use intensivamente, sabe muy poco de diseño web y usabilidad.

Pero no se puede negar que sirven para diversas tareas, se puede implementar de dos formas con Javascript, mediante un enlace o de forma automática con la apertura de una página.

1. Pop-up lanzado mediante un enlace
Antes de la etiqueta </head>, pegamos el siguiente Script
<script language="JavaScript">
function Abrir_ventana (pagina) {
var opciones="toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=yes, width=300, height=400, top=0, left=0";
window.open(pagina,"",opciones);
}
</script>
</head>

En cualquier parte entre las etiquetas <body></body> agregamos el siguiente enlace
<a
onload="Abrir_ventana('http://sitio.com/tu_pop_up.html')" href="javascript:Abrir_ventana('http://sitio.com/tu_pop_up.html')">Enlace para lanzar Pop-up</a>
Donde cambiaremos la dirección web destino y podremos agregar otros enlaces con diferentes direcciones.

2. Pop-up lanzado de forma automática

En este caso agregar el siguiente script antes de </head>:
<script language="JavaScript">
function Abrir_ventana (pagina) {
var opciones="toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, width=400, height=300, top=0, left=0";
window.open(pagina,"",opciones);
}
</script>
</head>

Y luego en la etiqueta <body> le agregaremos onload="Abrir_ventana('http://sitio.com/tu_pop_up.html')" poniendo la dirección que vayamos a lanzar:
<body onload="Abrir_ventana('http://sitio.com/tu_pop_up.html')">
Variables
Noten que el Script tiene diversas variables, las primeras son para la barra de herramientas, el menú, la barra de desplazamiento entre otras que se modifican con la opción yes y no. Toolbar en modo no, por ejemplo, ocultará la barra de herramientas.

width y height controlan el tamaño del Pop-Up, Top y Left la separación respecto arriba y a la izquierda de la pantalla.

El abuso de los Pop-up no se recomienda, tanto porque es una forma agresiva de tratar a tus usuarios, y por ende de perder visitas, como una forma poco práctica de construir un sitio web, debido a software que puede dificultar abrir dichos enlaces, incluido el desactivar Javascript.
Ver lanzador de Pop ups en acción

Comentarios y Consultas

Los mensajes serán revisados a veces. No te olvides que soy una persona, no se trata de faltar al respeto, todos tenemos opiniones, no hay que enojarse.

Puedes marcar Notificarme para recibir la notificación de la respuesta.

13 comentarios:

  1. joya! justo lo q necesitaba vos me lo diste!! Gracias capo!

    ResponderBorrar
  2. Muy buueno. Pero lamentablemente ese script no abre una ventana emergente cuando se usa FireFox

    ResponderBorrar
  3. Una pregunta.. No sé.. .pero no me funciona!

    ResponderBorrar
  4. Si es con los enlaces el problema he replanteado el tutorial y ya funciona perfectamente.

    ResponderBorrar
  5. Los navegadores lo bloquean...

    ResponderBorrar
    Respuestas
    1. Funciona en cualquier navegador, pero si tienes un bloqueador de publicidad eso no es problema del script sino de un programa de terceros.

      Borrar
  6. Totalmente de acuerdo con el echo de que esta parte es utilizado de manera agresiva al usuario, genial no sabia como se hacia gracias

    ResponderBorrar
  7. Interesante el artículo, pero ¿cómo configuro el pop-up para que se active a los 30 segundos de haber cargado la página?
    Gracias.

    ResponderBorrar
    Respuestas
    1. Los pop-up que saltan solos son rechazados por los navegadores, por otro lado, 30 segundos es demasiado tiempo, las personas maximo estan una pagina 15 segundos.

      Borrar
  8. Excelente, justo lo que necesitaba, pero tengo un problema, lo que sucede es que al ejecutar la pagina el pop up no deja de aparecer, osea el script no se carga una sola vez que es lo que yo quisiera sino que se carga varias veces. ojala me haya explicado saludos

    ResponderBorrar
  9. Excelente, muchas gracias, me fue de bastante ayuda.

    ResponderBorrar
  10. Hola como se puede hacer para cargar una web en una pestaña nueva de forma automatica y pasado un tiempo que carge otra y luego otra?

    y esto mismo con los popups? e probado y funciona pero solo el primero, e intentado hacer que carge 2 o 3 y no me deja¿como se puede hacer? estoy intentando hacer algo un experimento algo asi como un autosurf y me seria de mucha ayuda, aun estoy aprendiendo, saludos

    ResponderBorrar
    Respuestas
    1. No se puede, desde hace mucho tiempo todos los navegadores bloquearon los pop-up automáticos por las razones precisas para las cuales piensas usarlas como publicidad abusiva. Los únicos pop-up que son permitidos son los generados por la acción de un clic por un pop-up.

      Borrar

El ascenso de Skywalker(2019)

Joker 2019Una película que ha roto a divido a los fans muchos culparán a sus director por querer reparar Los últimos Jedi, no es su culpa al final.

[Leer artículo...]

La Espada del Inmortal (2019

Blade of The Immortal (2019)La historia de Manji, un guerrero samurái sin señor que ha sido condenado con la inmortalidad...

[Leer artículo...]

Kemono Michi: Rise Up (2019)

Kemono Michi: Rise Up (2019)Del autor de Konosuba, Genzo Shibata es un luchador japonés que es transportado a un mundo de fantasía, quien está obsesionado con los seres peludos.

[Leer artículo...]

ELI (2019)de Netflix

ELI (2019)de Netflix Reseña y criticaPelícula lanzada directo a video que nos cuenta una historia que parecería sacada de la Dimensión desconocida.

[Leer artículo...]

  © Cgnauta | CGsign blog | [Ver Licencia de uso] | Matius Lenin, Creative Commons, algunos derechos reservados

Regresar ARRIBA  

Vistas desde Mayo 2009

▼/▲ Archivo del Blog

Visitas totales

Información

IBSN: Internet Blog Serial Number 01-77-94-2008

Esta plantilla es creada y diseñada por Matius Lenin para CGnauta blog. Con Scripts de JQuery bajo licencia GNU/GPL. CGnauta es una marca registrada propiedad de Matius Lenin.