7

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

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

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

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

7 回答 7

19

其他浏览器可能会缓存图像。尝试以下操作：

$("#captcha").attr("src", "captcha.php?"+(new Date()).getTime());
于 2013-01-02T18:26:45.660 回答
6

尝试不使用缓存方法（顺便说一句，标签需要设置 href 属性）：

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




    $('#reload').click(function(){
        var timestamp = new Date().getTime();
        $('#captcha').attr('src','captcha.php?'+timestamp)
    })
于 2013-01-02T18:26:02.773 回答
2

它可能是浏览器缓存。换句话说，浏览器看到它已经加载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());
});

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

<?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

于 2013-01-02T18:26:48.750 回答
2

尝试这个：

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">');
});

网络日志

每次我单击重新加载时，都会发出一个新请求。

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 元素将导致浏览器重新加载它。

于 2013-01-02T18:28:57.613 回答
1

由于到目前为止所有的答案都使用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();
  });
}
于 2014-04-25T23:22:59.210 回答
1

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

在浏览器 JavaScript 中： 

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

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

于 2016-05-31T05:51:51.853 回答
0

您还需要删除时间戳，因为它总是与之前的源 URL 连接。当用户多次单击重新加载按钮时，您可能会遇到问题。因此，最好在添加新时间戳之前从 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());
});
于 2014-01-16T21:25:10.210 回答