Javascript 更改ReCaptcha语言OnClick
我意识到,通过在api.js中添加“hl”选项来更改Recaptcha语言是很简单的Javascript 更改ReCaptcha语言OnClick,javascript,jquery,recaptcha,Javascript,Jquery,Recaptcha,我意识到,通过在api.js中添加“hl”选项来更改Recaptcha语言是很简单的 https://www.google.com/recaptcha/api.js?hl=fr 我想做的是,当有人单击通过查询字符串参数(如“?lang=fr”)公开的语言选择器时,更改Recaptcha语言。我有js将解析参数,但我似乎无法在head标记中重新加载脚本以包含参数 我已经看过了所有的条件IF…ELSE javascript加载文章。有没有办法在版本2中加载Recaptcha选项?我认为目前不可能通
https://www.google.com/recaptcha/api.js?hl=fr
我想做的是,当有人单击通过查询字符串参数(如“?lang=fr”)公开的语言选择器时,更改Recaptcha语言。我有js将解析参数,但我似乎无法在head标记中重新加载脚本以包含参数
我已经看过了所有的条件IF…ELSE javascript加载文章。有没有办法在版本2中加载Recaptcha选项?我认为目前不可能通过javascript直接设置Recaptcha语言。如您所述,在脚本加载期间使用参数“hl”是可能的 如果您需要在不重新加载页面的情况下动态更改应用程序的语言,可以通过从head部分删除recaptcha脚本链接,而直接通过javascript调用来加载。当您的用户通过单击按钮更改语言时,您现在可以通过再次调用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();
简单解决方案 您可以这样做: HTML
<div id="captcha_container"></div>
<select id="ddllanguageListsGoogleCaptcha"></select>
<input id="btnApplyLanguage" type="button" value="Apply Selected Language" />
您需要重新加载页面或销毁新页面中的html元素和脚本才能执行此操作。注意一个错误,该错误表示reCaptcha ID或reCaptcha容器必须为空。非常好。谢谢
// 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 + '&'));
}
}