Revista Blog

Lanzar popup una sola vez utilizando cookies en JavaScript

Publicado el 22 diciembre 2017 por Eduardo Javier Perez Cenepo @NeytorTec
Siguiendo con nuestra línea de tutoriales, hoy vamos a mostrar como Lanzar popup una sola vez utilizando cookies en JavaScript, un excelente método para las personas que utilizan mucho el tema del tráfico web compartido.
tutoriales javascript

Aprendiendo a crear un popup con cookies en JavaScript

Utilizando este popup hecho en javascript vamos a hacer que este sea lanzado una sola vez cuando el usuario haga click en cualquier lugar permitiendo así llevar tráfico web a otros sitios. Recuerda que para muchos usuarios esto puede ser muy fastidioso, pues te recomiendo tan solo utilizarlo con mucha discreción.
En ciertas ocasiones tan solo habíamos visto que se utilizan popup sin ninguna validación utilizando las cookies, esto es muy molesto ya que al no estar validado correctamente los popup salen continuamente al darle clicks a la página web.

Ejemplo para crear popup una sola vez con cookies

Lo primero que haremos será crear una función con el nombre openpopup() , esta a su vez contendrá la operación que hará dicha función, para ello utilizaremos window.open que nos permitirá abrir la ventana conteniendo la url de la página web a la que queremos llegar.
Como vamos a ver podemos hacerlo de esta forma, especificar la altura y tamaño de la ventana, así como por ejemplo meterle un scrollbars que no es mas que cuando hagamos rodar la ruedita del mouse esta empiece a deslizarse.
Ejemplo 01 :
 window.open("http://www.neytutoriales.com/","tupopup","width=120,height=300,scrollbars=NO")
Ejemplo 02:
window.open("http://www.neytutoriales.com/","_blank")
Como ya tenemos los ejemplos de window.open tu puedes utilizar cualquiera de los dos reemplazando tu web por la mía.
En este caso yo utilizaré la segunda opción y lo añadiré a la función get_cookie como puedes ver ya completamente programado.
Para utilizar este JavaScript vamos a irnos a la etiqueta </head> donde cerramos la cabecera, y antes de ello pegamos lo siguiente.
<script>
function openpopup(){
window.open("http://www.neytutoriales.com/","_blank")
}
function get_cookie(Name) {
var search = Name + &quot;=&quot;
var returnvalue = &quot;&quot;;
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) { // verifico si la cookie existe
offset += search.length
// set index of beginning of value
end = document.cookie.indexOf(&quot;;&quot;, offset);
// set index of end of cookie value
if (end == -1)
end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
function loadpopup(){
if (get_cookie(&#39;popped&#39;)==&#39;&#39;){
openpopup()
document.cookie=&quot;popped=yes&quot;
}
}
</script>
Luego de haber hecho lo siguiente buscamos el comienzo de la etiqueta <body> y pegamos a continuación la siguiente línea de código donde llamaremos a la función loadpopup() de las cookies que contiene la otra función openpopup().
<body  onclick='loadpopup();'>
Como podrás observar algo muy fácil y didáctico para ir aprendiendo a utilizar las cookies con popups.

Volver a la Portada de Logo Paperblog