重新加載PHP圖像（驗證碼）

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

嘗試不使用緩存方法（順便說一句，需要設置標簽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連接在一起。 當用戶多次單擊重新加載按鈕時，您可能會遇到問題。 因此，最好在附加新時間戳之前從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());
});