2

Buscando en la web me encontré con lo siguiente javascript:reloadCaptcha(); pero como se debe implementar, porque en el actual código no me actualiza una nueva imagen o código.

<div class="secure">
  <div class="update"><a href="javascript:reloadCaptcha();">Actualizar código</a></div>
  <img src="secureimage.php"/>
</div>

¿Cómo puedo hacer funcionar dicho código?

1 respuesta 1

0

Hay varias formas de refrescar una imagen con javascript. La más sencilla es sobreescribir el atributo src con el mismo valor anterior:

function reloadCaptcha() {
  var img = document.querySelector(".secure > img");
  img.src = img.src;
}
<div class="secure">
  <div class="update"><a href="javascript:reloadCaptcha();">Actualizar código</a></div>
  <img src="secureimage.php"/>
</div>

Quizá en algún navegador no se produzca el refresco si el nuevo valor es el mismo, por lo que otra solución podría ser agregar un número aleatorio en la cadena de consulta (lo que va tras el ?) que, inicialmente, debería tener un efecto neutro en la llamada al script PHP que genera el captcha:

function reloadCaptcha() {
  let img = document.querySelector(".secure > img");
  let miUrl = new URL(img.src);
  miUrl.search = Math.floor(Math.random() * 10000000);
  img.src = miUrl.href;
}
<div class="secure">
  <div class="update"><a href="javascript:reloadCaptcha();">Actualizar código</a></div>
  <img src="secureimage.php"/>
</div>

Para no tener que guardar la URL original he usado la clase URL y cambiado la propiedad search que se corresponde con la parte que va tras el ?.

1
  • 1
    Gracias @OscarGarcia, ha funcionado de maravillas :)
    – Pepe
    Commented el 6 sept. 2018 a las 12:43

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.