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 son moderados serán revisados antes de publicarse.

Este no es un foro de adolescentes, no uses letras en vez de palabras completas como "q" en vez de "que", ni escribas tus mensajes en mayúsculas, se respetuoso con los demás, si no estás de acuerdo no comentes.

Una cosa es que no te guste una crítica, otra que uses un lenguaje inapropiado para demostrarlo. No me siento en la obligación de publicar ningún mensaje en específico o de leerlo entero si usas palabras altisonantes.

13 comentarios:

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

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

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

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

    ResponderEliminar
  5. Los navegadores lo bloquean...

    ResponderEliminar
    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.

      Eliminar
  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

    ResponderEliminar
  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.

    ResponderEliminar
    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.

      Eliminar
  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

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

    ResponderEliminar
  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

    ResponderEliminar
    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.

      Eliminar

Termina la serie Grimgar de Fantasía y Cenizas

Grimgar de Fantasía y Cenizas (2016)Llegó a su fin Grimgar de Fantasía y Cenizas luego de doce episodios.

[Leer artículo...]

One Punch Man OVA 4 (2016): Review y crítica

One Punch Man OVA 4 (2016): Review y críticaY llega una nueva adaptación de personajes del universo marvel, una divertida aventura espacial.

[Leer artículo...]

Gate: Segunda temporada (2016): Episodio 12 Final: Reseña y crítica

Gate: Segunda temporada (2016): Episodio 12 Final: Reseña y críticaLas aventuras de Itami y sus amigos llega a su fin con el rescate de Piña de las manos de Zorzal.

[Leer artículo...]

Desaparecida: Boku Dake ga Inai Machi (2016) Episodio 12 Final - Reseña y crítica del anime

Desaparecida: Boku Dake ga Inai Machi (2016)Satoru descubre al culpable de la trama, es el momento de enfrentarse y tendrá que dar todo de sí para cambiar su suerte.

[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.

Anexos

Bitacoras.com