1

estoy intentando hacer una funcion en js para que cuando el usuario haga clic en un enlace pasen unos segundos y automaticamente redireccione a otra url.

function redireccionarPagina() {
  window.location = "http:/#";
}
setTimeout("redireccionarPagina()", 2000);
<a href="hielo-fuego.html" id="texto_mar" onmouseover="mouseOverMar()" onmouseout="mouseOutMar()">
  <img title="Mar" src="css/images/mar_text_white.png" onclick="reload()" />
</a>
<a id="maria">
  <img title="Mar_basic" src="css/images/o_basic.png" />
</a>
<a href="hielo-fuego.html" id="texto_tierra" onmouseover="mouseOverTierra()" onmouseout="mouseOutTierra()">
  <img title="Tierra" src="css/images/tierra_text_white.png" />
</a>

2
  • ¿Y cuál es el problema? Commented el 15 nov. 2017 a las 11:43
  • Pues que no se como hacer para que cuando el usuario haga clic en el enlace, pasen X segundos y luego redireccione a una url. @PabloLozano Lozano Commented el 15 nov. 2017 a las 11:52

5 respuestas 5

2

Tienes que detectar el click, anular el comportamiento por defecto, y entonces hacer el setTimeout:

let a=document.getElementById('enlace');
a.addEventListener('click',function (event) {
  event.preventDefault(); //esto cancela el comportamiento del click
  setTimeout(()=> location.href="https://www.google.com",1000);
});
<a href="https://www.google.com" id="enlace">Ir a google.com en un segundo</a>

El ejemplo no se ejecutará porque StackOverflow no lo permite en el código de las respuestas, pero debería funcionarte perfectamente.

1
  • Estoy intentando esto y me escupe el siguiente error: Cannot read property 'addEventListener' of null ¿qué puede fallar? Commented el 15 nov. 2017 a las 12:19
2

Si lo que quieres es que a cualquiera de tus enlaces que le den, se redireccione a una url, te recomiendo asignarle a todos tus enlaces un evento para que cuando le den clic a cada uno de ellos, se redireccione a la url en cuestión.

Para ello, puedes asignarle la función addEventListener a cada uno de tus enlaces, utilizando la función setTimeout dentro de la misma para esperar 2 segundos desde que le das clic hasta que se muestra la página.

Ejemplo:

var enlaces = document.getElementsByTagName("a");

for (var i = 0; i < enlaces.length; i++) {
    enlaces[i].addEventListener("click", function(){
      setTimeout(function(){
          window.open("https://www.google.es")
      }, 2000);
    });
}
<a href="#">Esto es un link</a>
<a href="#">Esto es otro link</a>
<a href="#">Esto es otro link</a>

12
  • Lo estoy usando pero no funciona, si el enlace está dentro de algun div eso puede ser un problema? Commented el 15 nov. 2017 a las 12:48
  • ¿Te da algún tipo de error en la consola? Commented el 15 nov. 2017 a las 12:57
  • La consola no refleja ningun mensaje de error. Commented el 15 nov. 2017 a las 13:03
  • @AntonioÁngelEstradaPérez ¿Lo que quieres mostrar es la url dentro del div? ¿O en una página diferente? Commented el 15 nov. 2017 a las 13:20
  • Quiero que cuando se haga clic en el enlace pasen dos segundos y seguidamente cargue la nueva url. Commented el 15 nov. 2017 a las 13:29
1

Utiliza setTimeout para esperar el tiempo que necesites y llama a la función que abra la URL.

function redireccionarPagina(){
    window.setTimeout( abrirURL, 3000 ); // 3 segundos
};
    
function abrirURL(){
    //Abrir URL que necesites
    console.log("Han pasado 3 segundos");
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="javascript:void(0)" onclick="redireccionarPagina()">Abrir</a>

1
1

Con JQuery quedaría así

$(document).on("click","#toGoogle",function(){
  setTimeout(function(){ window.location = "https://www.google.com.mx"; }, 1000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="toGoogle">Link<a/>

0

function mouseOverTierra_movil() {
    document.getElementById("texto_mar_movil").innerHTML = '<img src="css/images/mar_text_nowhite.png" />';
    document.getElementById("texto_tierra_movil").innerHTML = '<img src="css/images/tierra_text_white.png" />';
    document.getElementById("maria_movil").innerHTML = '<img style="max-width:85%;" src="css/images/tierra_img.png" />';
    setTimeout(()=> location.href="http://paginaprueba.es/mariadelao/hielo-fuego.html",2200);
}
<a href="#" id="texto_mar_movil" onmouseover="mouseOverMar_movil()"><img title="Mar" src="css/images/mar_text_white.png"/></a>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.