7

これは、ユーザーが必要に応じて画像を再読み込みするリンクを含むキャプチャ画像です。このコードはGoogleChromeでのみ機能します。他のブラウザで動作させるにはどうすればよいですか？

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

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

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

7 に答える 7

19

他のブラウザはおそらく画像をキャッシュします。次のことを試してください。

$("#captcha").attr("src", "captcha.php?"+(new Date()).getTime());
于 2013-01-02T18:26:45.660 に答える
6

キャッシュ方法を使用せずにこれを試してください（ところで、タグにはhref属性を設定する必要があります）。

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




    $('#reload').click(function(){
        var timestamp = new Date().getTime();
        $('#captcha').attr('src','captcha.php?'+timestamp)
    })
于 2013-01-02T18:26:02.773 に答える
2

ブラウザのキャッシュである可能性があります。つまり、ブラウザはすでにロードされていることを認識しているcaptcha.phpため、再度ロードする必要はありません。

現在の時刻を含むクエリ文字列を画像ソースに追加してみてください。画像ソースは、ブラウザが再読み込みを試みる前に読み込まれていないURLになります。

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

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

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

captcha.phpさらに良いことに、ブラウザがHTTPヘッダーをキャッシュしないように、HTTPヘッダーをオンに設定します。

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

ソース：https ：//stackoverflow.com/a/4485194/284685

于 2013-01-02T18:26:48.750 に答える
2

これを試して：

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

NETログ

[再読み込み]をクリックするたびに、新しいリクエストが作成されます。

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

新しいimg要素を追加すると、ブラウザはそれをリロードします。

于 2013-01-02T18:28:57.613 に答える
1

これまでの回答はすべてjQueryを使用しているので、プレーンなJavascriptのみを使用するものを投稿したいと思いました。

// 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();
  });
}
于 2014-04-25T23:22:59.210 に答える
1

画像のsrcが同じである場合、ブラウザは新しいHTTPリクエストをサーバーに送信しません。したがって、役に立たないタイムスタンプを追加してsrcを変更します。

ブラウザのjavascript： 

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

これは、キャプチャ画像を更新するためのデモです。

于 2016-05-31T05:51:51.853 に答える
0

また、タイムスタンプは常に前のソースURLと連結されるため、削除する必要があります。ユーザーがリロードボタンを何度もクリックすると、問題が発生する可能性があります。したがって、新しいタイムスタンプを追加する前に、URLから以前のタイムスタンプを削除することをお勧めします。

$('#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());
});
于 2014-01-16T21:25:10.210 に答える