Google recaptcha 動態切換語言 change google reCaptcha language dynamically

在使用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;
});