2

我有动态生成新验证码图像的 php 代码。我有一个 HTML 按钮，它通过 jquery 事件处理程序用新的验证码图像刷新。单击按钮（并触发 jquery 事件处理程序）会在 chrome 和 safari 中生成一个新图像——但在 Firefox 中不会。火狐有什么不同？我怎样才能让它在Firefox中工作？

javascript 控制台在任何浏览器中都没有显示错误。

这是代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8'/>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script>
           $(document).ready(function () {
                     $("#submitButton").click(function(event) {                     
                        $("#captchaText").attr('src', 'cryptographp.inc.php?intro=false'); //this line does not generate a fresh image in firefox
                    });
           });

    </script>
    <link rel="stylesheet" type="text/css" href="stylesheet2.css">

</head>


<body>
<div class="wrapper">
    <div id='header'>
     </div>

      <div id='captchaPanel'>

        <div id='top'>
            <div id='fillerTop'>

            </div>
            <div id='captcha'>
                <img id='captchaText' src='cryptographp.inc.php?intro=false'> </img>
            </div>
        </div>
    </div>


    <div id='submitDiv'>
    <input id='submitButton' type="submit" class="button" value="Submit"/>
    </div>

</div>

</body>

也许我需要通过明确的 AJAX 调用来做到这一点？像这样的东西（我猜测语法）。

$.ajax({
    url: 'cryptographp.inc.php?intro=false',
    success: function(data) {  $("#captchaText").attr('src', data); }
});
4

1 回答 1

9

替代#1 - 使用额外的query string

确保图像没有从缓存中加载的一种非常简单的方法是添加一个额外query string的参数（不需要在 上读取它server side），因此不可能URL两次使用相同的图像（在同一台计算机上） .

在这种情况下，我使用了milliseconds since epochby using Date().getTime()。

var now = new Date().getTime();
$("#captchaText").attr('src', 'cryptographp.inc.php?intro=false&time=' + now);

这将导致请求URL如下：

cryptographp.inc.php?intro=false&time=1379998715616
cryptographp.inc.php?intro=false&time=1379998715618
cryptographp.inc.php?intro=false&time=1379998715636
etc...

备选方案 #2 - 使用 PHP 禁用 HTTP 缓存

您还可以cryptographp.inc.php使用以下代码禁用缓存（即使您选择Alternative #1 ，这也可能是个好主意）：

header("Content-Type: application/json");
header("Expires: on, 01 Jan 1970 00:00:00 GMT");
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
header("Cache-Control: no-store, no-cache, must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");

就像Nathaniel Granor在评论中所说，在某些浏览器上，将图像更改src attribute为相同的图像URL可能不会产生新的图像HTTP request，因此建议您先将其切换到不同的位置。

例如（JS）：

  $("#captchaText").attr('src', 'temp.png')
                   .attr('src', 'cryptographp.inc.php?intro=false');
  • PS - 在这种情况下，我建议temp.png将是一个包含非常小的图像（例如透明图像）的真实文件。1px * 1px
于 2013-09-24T03:56:53.843 回答