Question

这是一个验证码图像，其中包含一个链接，如果用户需要，该链接将重新加载图片。此代码仅适用于Google Chrome。如何在其他浏览器中使用它？

<img id="captcha" src="captcha.php">

<a id='reload'>Refresh now</a>

$('#reload').click(function(){
    $('#captcha').attr('src','captcha.php')
})

Answer 1

其他浏览器可能会缓存图像。请尝试以下方法：

$("#captcha").attr("src", "captcha.php?"+(new Date()).getTime());

Answer 2

尝试使用无缓存方法（BTW标签需要设置href属性）：

<a id='reload' href='#'>Refresh now</a>




    $('#reload').click(function(){
        var timestamp = new Date().getTime();
        $('#captcha').attr('src','captcha.php?'+timestamp)
    })

Answer 3

可能是浏览器缓存。换句话说，浏览器看到它已加载captcha.php，因此无需再次加载它。

尝试将查询字符串附加到包含当前时间的图像源。由于图像源现在将是浏览器未加载的URL，因此它将尝试重新加载它。

<img id="captcha" src="captcha.php">

<a id='reload'>Refresh now</a>

$('#reload').click(function(){
    $('#captcha').attr('src','captcha.php?' + (new Date()).getTime());
});

更好的是，在captcha.php上设置HTTP标头，以确保浏览器不会缓存它。

<?php
  // Set headers to NOT cache a page
  header("Cache-Control: no-cache, must-revalidate"); //HTTP 1.1
  header("Pragma: no-cache"); //HTTP 1.0
  header("Expires: Sat, 26 Jul 1997 05:00:00 GMT"); // Date in the past
?>

来源：https://stackoverflow.com/a/4485194/284685

Answer 4

试试这个：

<强> DOM

<div id="captcha-container">
    <img src="captcha.php" id="captcha">
</div>

<强>的jQuery

$('#reload').click(function() {
    $('#captcha').remove();
    $('#captcha-container').html('<img src="captcha.php" id="captcha">');
});

NET日志

每次单击“重新加载”时，都会发出新请求。

GET captcha.php 
200 OK
127.0.0.1:80

GET captcha.php 
200 OK
127.0.0.1:80

GET captcha.php 
200 OK
127.0.0.1:80

添加新的img元素将导致浏览器重新加载它。

Answer 5

由于到目前为止所有的答案都使用了jQuery，我认为我发布的帖子只使用普通的Javascript。

// Helper function to attach event listener functions to HTML elements.
function attach(el, event, fun) {
  if (el.addEventListener) {
    el.addEventListener(event, fun);
  }
  else {
    el.attachEvent("on"+event, fun);
  }
}

// Find the <a id='reload'> element.
var id_reload = document.getElementById("reload");
if (null !== id_reload) {
  // Find the <img id='captcha'> element. We assume this works, so no check against null.
  var id_captcha = document.getElementById("captcha");
  attach(id_reload, "click", function() {
    id_captcha.src = "captcha.php?" + (new Date()).getTime();
  });
}

Answer 6

如果图像的src保持不变，浏览器将不会向服务器发送新的HTTP请求。因此，通过添加无用的时间戳来更改src。

在浏览器中javascript：

var capImage = document.getElementById("captcha-image");  
capImage.addEventListener("click", function () {  
    capImage.src = "/captcha?timestamp=" + (new Date()).getTime();  
});

这是刷新验证码图像的演示。

Answer 7

您还需要删除时间戳，因为它将始终与之前的源URL连接。当用户在重新加载按钮上多次单击时，您可能会遇到问题。因此，最好在添加新的时间之前从网址中删除以前的时间戳。

$('#reload').on('click', function(){
    var img=$('#captchaimage');
    var src=img.attr('src');
    var i=src.indexOf('?dummy=');
    src=i!=-1?src.substring(0,i):src;
    d = new Date();
    img.attr('src',src+'?dummy='+d.getTime());
});

重新加载php图像（验证码）

7 个答案: