Javascript 跨浏览器问题：firefox在首次加载后不会从php文件加载图像_Javascript_Jquery_Ajax_Firefox_Cross Browser

Javascript 跨浏览器问题：firefox在首次加载后不会从php文件加载图像

javascript jquery ajax firefox

Javascript 跨浏览器问题：firefox在首次加载后不会从php文件加载图像,javascript,jquery,ajax,firefox,cross-browser,Javascript,Jquery,Ajax,Firefox,Cross Browser,我有php代码，动态生成一个新的验证码图像。我有一个HTML按钮，通过jquery事件处理程序用一个新的刷新captcha图像。单击按钮（并启动jquery事件处理程序）会在chrome和safari中生成一个新图像，但在firefox中不会。firefox有什么不同？我如何让它在firefox中工作 javascript控制台在任何浏览器中都不会显示错误代码如下： <!DOCTYPE html> <html> <head> <

我有php代码，动态生成一个新的验证码图像。我有一个HTML按钮，通过jquery事件处理程序用一个新的刷新captcha图像。单击按钮（并启动jquery事件处理程序）会在chrome和safari中生成一个新图像，但在firefox中不会。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>

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

查询字符串

确保图像不从缓存加载的一个非常简单的方法是添加一个额外的

查询字符串

作为参数（无需在

服务器端读取它），因此不可能两次使用相同的URL
（在同一台计算机上）
在本例中，我通过使用Date（）.getTime（）
使用了自epoch以来的毫秒
这将导致请求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
中的缓存（即使选择备选方案#1，这也可能是一个好主意）：

进一步阅读：（代码取自此处）

正如Nathaniel Granor在评论中所说，在某些浏览器上，将图像的src属性
更改为相同的URL
可能不会产生新的HTTP请求
，因此建议您先将其切换到其他位置
例如（JS）：

另外，在这种情况下，我建议temp.png
将是一个真实文件，其中包含一个非常小的图像（例如1px*1px
透明图像）
“firefox是否缓存对PHP文件的调用？”——firefox不知道PHP文件是什么。有http请求和缓存头。Ffox/Firebug的JavaScript调试器中显示了什么？有时浏览器会让不正确的代码毫无问题地执行，因此Chrome可能比FFox更宽容。是的，问题可能与您使用相同的值替换src属性有关。Firefox可能会选择不再调用服务器，因为它认为它已经拥有了正确的文件。除了Itay的建议，您还可以修改您的php文件，以生成一个标头，指定浏览器不应缓存该文件。您的第一种方法有效，但第二种方法无效。毕竟我完成了工作：）
var now = new Date().getTime();
$("#captchaText").attr('src', 'cryptographp.inc.php?intro=false&time=' + now);

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

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

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