javascript 重新加载 php 图像（验证码）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14127132/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Reload php image (captcha)
提问by Enve
This is a captcha image with a link that will reload the picture if the user wants. This code works only in Google Chrome. How do I make it work in other browsers?
这是一个带有链接的验证码图像，如果用户需要，该链接将重新加载图片。此代码仅适用于 Google Chrome。我如何使它在其他浏览器中工作？
<img id="captcha" src="captcha.php">
<a id='reload'>Refresh now</a>
$('#reload').click(function(){
$('#captcha').attr('src','captcha.php')
})
回答by johankj
The other browsers probably cache the image. Try the following:
其他浏览器可能会缓存图像。请尝试以下操作：
$("#captcha").attr("src", "captcha.php?"+(new Date()).getTime());
回答by A. Wolff
Try this using no caching method (BTW a tag need href attribute to be set):
不使用缓存方法试试这个（顺便说一句，标签需要设置 href 属性）：
<a id='reload' href='#'>Refresh now</a>
$('#reload').click(function(){
var timestamp = new Date().getTime();
$('#captcha').attr('src','captcha.php?'+timestamp)
})
回答by Adam
It could be browser caching. In other words the browser sees that it already loaded captcha.phpso it does not need to load it again.
可能是浏览器缓存。换句话说，浏览器看到它已经加载，captcha.php所以它不需要再次加载它。
Try appending a query string to the image source that includes the current time. Since the image source will now be a URL that the browser has not loaded before it will try to reload it.
尝试将查询字符串附加到包含当前时间的图像源。由于图像源现在将是浏览器在尝试重新加载之前尚未加载的 URL。
<img id="captcha" src="captcha.php">
<a id='reload'>Refresh now</a>
$('#reload').click(function(){
$('#captcha').attr('src','captcha.php?' + (new Date()).getTime());
});
Better yet, set the HTTP headers on captcha.phpto ensure the browser will not cache it.
更好的是，设置 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
?>
回答by phpisuber01
Try this:
试试这个：
DOM
DOM
<div id="captcha-container">
<img src="captcha.php" id="captcha">
</div>
jQuery
jQuery
$('#reload').click(function() {
$('#captcha').remove();
$('#captcha-container').html('<img src="captcha.php" id="captcha">');
});
NET Log
网络日志
Each time I click Reload, a new request is made.
每次单击重新加载时，都会发出一个新请求。
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
Adding in a new img element will cause the browser to reload it.
添加一个新的 img 元素将导致浏览器重新加载它。
回答by Jens
Since all the answers so far use jQuery, I thought I'd post mine which uses only plain Javascript.
由于到目前为止所有答案都使用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();
});
}
回答by jamesxiang
If the src of the image keep the same, the browser won't send a new HTTP request to the server. So change the src by adding a useless timestamp.
如果图片的 src 保持不变，浏览器将不会向服务器发送新的 HTTP 请求。因此，通过添加无用的时间戳来更改 src。
In browser javascript:
在浏览器javascript中：
var capImage = document.getElementById("captcha-image");
capImage.addEventListener("click", function () {
capImage.src = "/captcha?timestamp=" + (new Date()).getTime();
});
This is a demo for refresh captcha image.
这是刷新验证码图像的演示。
回答by kasper Taeymans
You also need to remove the timestap because it will always concatenate with the previous source url. you might run into problems when a user clicks many times on the reload button. So it is better to remove the previous timestamp from the url before appending a new one.
您还需要删除时间戳，因为它将始终与之前的源 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());
});
