Question

This is a really strange issue, I am trying to use the Recaptcha on one of the website, and it works for all browsers tested except for IE6.

I have made a reference to the google’s js:
http://www.google.com/recaptcha/api/challenge?k=the_key
and it is loaded according to fiddler2 & the ‘onreadystatechange’ event (which have a readystate == ‘loaded’)

The normal work flow should be the loaded JS been parsed, and another js been requested, then the image loaded from google. my problem is that the first loaded JS file (content similar to below):

var RecaptchaState = {
    site : 'xxxxxxxxxxxx',
    challenge : 'xxxxxxxxxxxxxxxxxxxxxxxxx',
    is_incorrect : false,
    programming_error : '',
    error_message : '',
    server : 'http://www.google.com/recaptcha/api/',
    timeout : 18000
};

document.write('<scr'+'ipt type="text/javascript" s'+'rc="' + RecaptchaState.server + 'js/recaptcha.js"></scr'+'ipt>');

is not parsed. First, the following JS test:

 typeof RecaptchaState == 'undefined'

Secondly, there is no second script request (according to fiddler2), not to say the recaptcha image…

The script tag is put inside the body, after the recaptcha markups, and I have even tried to load the JS dynamically:

function GetJavaScript(url, callback) {
    var script = document.createElement('script');
    script.src = url;
    var head = document.getElementsByTagName('head')[0];
    var done = false;

    // Attach handlers for all browsers
    script.onload = script.onreadystatechange = function () {
        if (!done && (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete')) {
            done = true;
            callback();

            // remove the hanlder
            script.onload = script.onreadystatechange = null;
            head.removeChild(script);
        }
    };

    head.appendChild(script);
}

which gives same behaviour… what confuses me most is:
this issue occurs occasionally only when the page is redirectly from another page. (open the url directly in new browser window or refresh the page always works fine, however refresh page using JavaScript does not work…)

Please help, any advice and/or idea would be appreciated…

Answer 1

This is not a solve, just an workaround.

Request the first js file: http://www.google.com/recaptcha/api/challenge?k=the_key
on the server site, and inject the first part of the script on the page directly:

var RecaptchaState = {
    site : 'xxxxxxxxxxxx',
    challenge : 'xxxxxxxxxxxxxxxxxxxxxxxxx',
    is_incorrect : false,
    programming_error : '',
    error_message : '',
    server : 'http://www.google.com/recaptcha/api/',
    timeout : 18000
};

Then, using the GetJavaScript function and/or JQuery.getScript() function to load the second script:
http://www.google.com/recaptcha/api/js/recaptcha.js

This solution works for IE6 based on my test, and to make the server less load, I detect the user’s browser at server end as well as client end to inject different logic.

I know this is dirty workaround, just in case this might help someone.