更改 ReCaptcha 语言的点击事件

Question

我意识到通过在api.js中添加"hl"选项来更改Recaptcha语言是微不足道的。

https://www.google.com/recaptcha/api.js?hl=fr

我想做的是，当有人点击语言选择器时，通过查询字符串参数（例如“?lang=fr”）更改Recaptcha语言。 我有js来解析参数，但似乎无法重新加载head标记中的脚本以包含该参数。

我已查看了所有条件IF ... ELSE javascript加载文章。 有没有办法使用版本2加载Recaptcha选项？

- smoore4

---

您需要重新加载页面或在新页面中销毁HTML元素和脚本才能执行此操作。请注意，如果出现“reCaptcha ID”或“reCaptcha容器必须为空”的错误，请及时处理。 - colecmc

Answer 1

简单的解决方案

您可以像这样做：

HTML

<div id="captcha_container"></div>
<select id="ddllanguageListsGoogleCaptcha"></select>
<input id="btnApplyLanguage" type="button" value="Apply Selected Language" />

JS

// Button for updating captcha language
$('#btnApplyLanguage').click(function () {
    updateGoogleCaptchaLanguage($('#ddllanguageListsGoogleCaptcha').val());
});

// Update language captcha 
function updateGoogleCaptchaLanguage(selectedLanguage) {

    // Get GoogleCaptcha iframe
    var iframeGoogleCaptcha = $('#captcha_container').find('iframe');

    // Get language code from iframe
    var language = iframeGoogleCaptcha.attr("src").match(/hl=(.*?)&/).pop();

    // Get selected language code from drop down
    var selectedLanguage = $('#ddllanguageListsGoogleCaptcha').val();

    // Check if language code of element is not equal by selected language, we need to set new language code
    if (language !== selectedLanguage) {
        // For setting new language 
        iframeGoogleCaptcha.attr("src", iframeGoogleCaptcha.attr("src").replace(/hl=(.*?)&/, 'hl=' + selectedLanguage + '&'));
    }
}

Online demo (jsFiddle)

- Ali Soltani

---

非常好。谢谢！ - smoore4

我找了很多答案，都是错误的。这是唯一有效的方法。挽救了我的一天。 - vivid_voidgroup

Answer 2

目前我认为不可能直接通过JavaScript设置reCAPTCHA语言。正如您所述，可以在脚本加载期间使用参数“hl”来实现。

如果您需要在不重新加载页面的情况下动态更改应用程序的语言，则可以通过从JavaScript直接调用加载recaptcha而不是将其链接到头部部分来实现此目的。当用户通过单击按钮更改语言时，您现在可以通过再次调用load函数来重新加载带有新语言的recaptcha。

在我的情况下，recaptcha元素显示在模态框中，用户响应通过ajax发送到服务器，并在服务器端针对Google进行验证。像这样的代码可以解决问题：

/* Clears recaptcha HTML element of all content, clears 
 * recaptcha element id so that the code would know to create 
 * the new HTML. Reloads recaptcha code with the new specified 
 * language using jQuery */
var captchaReload = function(langCode) {
    $('#recaptchaDiv').empty();
    recaptchaElement = null;
    var url = "https://www.google.com/recaptcha/api.js?render=explicit&hl=" + langCode;
    $.getScript(url);
};

/* Called by recaptcha when the user solves the puzzle.
 * The incoming parameter 'response' is generated by the recaptcha 
 * and needs to be validated against google separately, which 
 * is not shown here */
var captchaValidate = function(response){
    console.log('Doing captcha response: ' + response);
    grecaptcha.reset();
    $('#captchaModal').modal('hide');
    // TODO: Add server side call for validating the client response
};

/* Variable for keeping track if recaptcha has already been created */
var recaptchaElement = null;

/* Called for initializing the recaptcha element and opening the modal */
var captchaShow = function () {
    // Initialize recaptcha if it is not present yet
    if(recaptchaElement === null){
        recaptchaElement = grecaptcha.render('recaptchaDiv', {
            'sitekey'   : 'YoUrReCaPtChAsItEkEy',
            'theme'     : 'light',
            'callback'  : captchaValidate
        });
    }
    // Open captcha modal
    window.setTimeout(function() {
        $('#captchaModal').modal('show');
    },300);
};

现在，在页面加载或用户选择新语言时，你可以这样做：

captchaReload('fr');

它应该从页面中删除现有的reCAPTCHA对象并重新加载正确语言的对象。之后，您可以使用以下方式打开模态框：

captchaShow();

- Tarmo