代码之家 › 专栏 › 技术社区 › bernie2436 MarioD

跨浏览器问题:firefox在第一次加载后不会从php文件加载图像

cross-browser firefox ajax jquery javascript

bernie2436 MarioD · 技术社区 · 11 年前

我有php代码,可以动态生成一个新的captcha图像。我有一个HTML按钮,通过jquery事件处理程序用一个新的按钮刷新captcha图像。单击按钮(并启动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); }
});

1 回复 | 直到 11 年前

Community CDub 4 年前

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

确保图像不从缓存加载的一个非常简单的方法是添加额外的 查询字符串 作为参数(无需在 server side ),所以不可能是一样的 URL 被使用了两次( 在同一台计算机上 ).

在这种情况下,我使用了 milliseconds since epoch 通过使用 Date().getTime() .

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

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

您也可以在 cryptographp.inc.php 使用以下代码(即使您选择 备选方案#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 (代码取自此处)。

喜欢 纳撒尼尔·格兰诺 评论中说,关于一些浏览器更改图像 src attribute 至相同 统一资源定位地址 可能不会产生新的 HTTP request ,因此建议您先将其切换到其他位置。

例如(JS):

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

附言-在这种情况下,我建议 temp.png 将是一个 真实文件 包含非常小的图像(例如 1px * 1px 透明图像)。

跨浏览器问题:firefox在第一次加载后不会从php文件加载图像

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

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

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