Reload recaptcha on browser back button

2019-08-05 11:04发布

问题:

I have tried numerous methods to reload the image when paging back but no matter what i try i get the same image. Some methods were close ( i can see the image refresh, but the recaptcha server responds back and the previous image reappears). Is there some trick to getting the image to reload when clicking the back button? I dont want my users to have to re-enter all the form information if they type the security words incorrectly. I also want to avoid storing all the information. The page is classic asp, so jquery or ajax methods would be the route to go, or so id assume. Thanks in advance.

回答1:

I figured out a quick hack that fixes this issue. On the page with the recaptcha add the following jquery

<script>
$(document).ready(function(){
  $("#form_div").Show();
);
</script>

Just replace "#form_div" with whatever div houses your form. Now when the user hits the back button it refreshes the recaptcha image. It is a hack in every sense of the word, but it worked for me.



回答2:

Call your refresh method from window.onload:

window.onload = function(){ /* refresh here */ }


回答3:

Edit: removed history API answer to show possible AJAX answer.

With jQuery it is ridiculously easy.

$(window).on('load',function(){
    $('#RecaptchaContainer').load('/path/to/recaptcha.php',function(){
         // any javascript you need to perform on the recaptcha
    });
});

You can have all the recaptcha HTML in that file, but you can contain all the javascript within that callback function.



回答4:

This is the easy method that works with Chrome:

Add reload function on HTML body as below:

<body onload="javascript:Recaptcha.reload()">

And reCaptcha image auto reloads in Chrome when user click the back button.



回答5:

I managed to get it to refresh correctly by using this line of code:

body onLoad="javascript:Recaptcha.reload()"

But this method is not a good solution because the focus sets on the recaptacha text field, which means the window scrolls down to the bottom of the page which is where the recaptacha field is, even when you enter the page for the first time (not only when pressing "BACK" to the page). This solution works but it would be better to find a solution which does not set the focus on the recaptacha input field.