Tải lại hình ảnh php (captcha)

Question

Đây là hình ảnh xác thực có liên kết sẽ tải lại hình ảnh nếu người dùng muốn. Mã này chỉ hoạt động trong Google Chrome. Làm thế nào để làm cho nó hoạt động trong các trình duyệt khác?

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

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

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

Answer 1

Các trình duyệt khác có lẽ là bộ nhớ cache hình ảnh. Hãy thử các cách sau:

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

Answer 2

Hãy thử điều này không sử dụng phương pháp bộ nhớ đệm (BTW thẻ cần thuộc tính href được thiết lập):

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




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

Answer 3

Có thể là bộ nhớ đệm của trình duyệt. Nói cách khác, trình duyệt thấy rằng nó đã được tải captcha.php để nó không cần tải lại.

Thử thêm chuỗi truy vấn vào nguồn hình ảnh bao gồm thời gian hiện tại. Vì nguồn hình ảnh bây giờ sẽ là một URL mà trình duyệt chưa tải trước khi nó sẽ cố gắng tải lại nó.

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

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

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

Tốt hơn, hãy đặt tiêu đề HTTP thành captcha.php để đảm bảo trình duyệt sẽ không lưu vào bộ nhớ cache.

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

Nguồn: https://stackoverflow.com/a/4485194/284685

Answer 4

Hãy thử điều này:

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

Nhật ký NET

Mỗi lần tôi nhấp vào Tải lại, yêu cầu mới được thực hiện.

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 

Việc thêm phần tử img mới sẽ khiến trình duyệt tải lại.

Answer 5

Bạn cũng cần phải xóa dấu thời gian vì nó sẽ luôn luôn nối với url nguồn trước đó. bạn có thể gặp sự cố khi người dùng nhấp nhiều lần vào nút tải lại. Vì vậy, tốt hơn là xóa dấu thời gian trước đó khỏi url trước khi thêm một dấu thời gian mới.

$('#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()); 
}); 

Answer 6

Vì tất cả câu trả lời cho đến nay sử dụng jQuery, tôi nghĩ tôi sẽ đăng bài chỉ sử dụng Javascript thuần túy.

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

Nếu src của hình giữ nguyên, trình duyệt sẽ không gửi yêu cầu HTTP mới đến máy chủ. Vì vậy, thay đổi src bằng cách thêm một dấu thời gian vô dụng.

Trong javascript trình duyệt:

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

Đây là một bản demo cho hình ảnh refresh captcha.