更改ReCaptcha语言OnClick
我意识到通过向api.js添加“hl”选项来改变Recaptcha语言是微不足道的。
https://www.google.com/recaptcha/api.js?hl=fr 我想要做的是当有人点击通过QueryString参数暴露的语言选择器时更改Recaptcha语言，例如“？lang = fr”我有js将解析参数但我似乎无法重新加载脚本head标签包含param。
我看了所有有条件的IF … ELSE javascript加载文章。 有没有办法加载版本2的Recaptcha选项？
简单解决方案
你可以这样做：
HTML
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 + '&')); } }
在线演示（jsFiddle）
我认为目前不能直接通过javascript设置recaptcha语言。 如您所述，但是在脚本加载期间可以使用参数’hl’。
如果您需要在不重新加载页面的情况下动态更改应用程序的语言，可以通过从head部分删除recaptcha脚本链接来执行此操作，而是直接使用javascript调用来加载它。 当您的用户通过单击按钮更改语言时，您现在可以通过再次调用load函数来重新加载使用新语言的recaptcha。
在我的例子中，recaptcha元素显示在一个模态中，用户响应通过ajax发送到服务器，并在服务器端针对Google进行validation。 像这样的东西可以解决问题：
/* 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();