【问题标题】：Cross-browser issue: firefox does not load images from a php file after first load跨浏览器问题：firefox 首次加载后不从 php 文件加载图像
【发布时间】：2013-09-27 04:30:20
【问题描述】：

我有动态生成新验证码图像的 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); }
});

【问题讨论】：

"Firefox 是否缓存对 PHP 文件的调用？" --- firefox 不知道什么是 php 文件。有http请求和缓存头。
Ffox / Firebug 的 JavaScript 调试器中出现了什么？有时浏览器可以让不正确的代码毫无问题地执行，因此 Chrome 可能比 FFox 对你更宽容。

标签： javascript jquery ajax firefox cross-browser

【解决方案1】：

备选方案 #1 - 使用额外的 `query string`

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

在这种情况下，我通过使用Date().getTime() 来使用milliseconds since epoch。

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

进一步阅读：Disable HTTP Cache With PHP（代码取自那里）。

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

例如（JS）：

  $("#captchaText").attr('src', 'temp.png')
                   .attr('src', 'cryptographp.inc.php?intro=false');

P.S - 在这种情况下，我建议temp.png 将是一个真实文件，其中包含一个非常小的图像（例如1px * 1px 透明图像）。

【讨论】：

是的 - 问题似乎与您将 src 属性换出相同值的事实有关。 Firefox 可能会选择不再调用服务器，因为它认为它已经拥有正确的文件。作为 Itay 建议的补充或替代方案，您可以修改您的 php 文件以发出一个标头，指定浏览器不应缓存该文件。
你的第一种方式有效，虽然第二种方式没有用。毕竟我完成了工作:)

备选方案 #1 - 使用额外的 query string

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

备选方案 #1 - 使用额外的 `query string`