IE6 dose not parse the loaded JavaScript file (Recaptcha hosted by Google)

Question

Hi,

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 make 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 confuse 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

NOT ANSWER (or is it?):fo_Ok ie6. Seriously, forget it. Without this attitude ie6 will live forever. It is like ancient evil spirit which will be alive until someone believe in it.

Answer 2

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.

Answer 3

Double check that your script's src in the page source isn't api.recaptcha.net (some libraries use that, I know the Java one I was using did). If it is, that gets forwarded to www.google.com/recaptcha/api, and that seems to cause issues with IE6. Once I switched to using www.google.com/recaptcha/api as the actual script src, IE6 was completely happy. Good luck!