在使用Google Recaptcha v2時,可以通過在url指定hl引用指定語言的recaptcha,如:
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit&hl=zh-HK" async defer></script>
但是似乎沒有方法可以直接動態切換語言,所以只能另想他法,如下:
正常的方法是直接調用 grecaptcha.render("html_element", parameters)
<div id="html_element"></div>
參考:https://developers.google.com/recaptcha/docs/display
值得注意的一點是:grecaptcha.render
的 parameters可以傳入 hl 指定語言,而官方文檔沒有寫明,如下:
grecaptcha.render("html_element", {
'sitekey': 'your-site-key',
'hl': "zh-HK"
});
語言代碼參考:https://developers.google.com/recaptcha/docs/language
所以,我利用這一點,在需要切換語言時,直接刪除原本recaptcha,再動態插入新的html元素,然後再調用render, 并指定語言。
PS:以下代碼需要jQuery,如不想使用可以適當修改。
1.Html 結構
<div id="recaptcha-wrapper-a" class="recaptcha-wrapper"><!--recaptcha 生成的位置--></div>
2.定義一個function,用來Render recaptcha:
function renderGRecaptcha(elementId, successCallback, expiredCallback) {
$(elementId).html(""); //刪除原本recaptcha
var id = "rg-" + new Date().getTime(); //生成新id
var ele = '<div id="' + id + '"></div>'; //新的html元素
$(elementId).html(ele); //將新html元素插入原本位置
grecaptcha.render(id, {
'sitekey': 'your-site-key',
'callback': function (token) {
successCallback(token);
},
'expired-callback': function () {
expiredCallback();
},
'hl': setting.lang //指定語言
});
}
3.使用
renderGRecaptcha('#recaptcha-wrapper-a', function (token){
gRecaptchaToken = token;
}, function () {
gRecaptchaToken = null;
});