[javascript] ReCAPTCHA - IE9 Error ReCAPTCHA placeholder element must be empty

Words
51
Reading
1 min
Listen
Play
9y

ReCAPTCHA - IE9 Error ReCAPTCHA placeholder element must be empty

1. recaptcha 적용 Script


function G_RECAPTCHA_CALL_BACK() {
    window.grecaptcha.render('recaptcha', {
        sitekey : 'SITE_KEY',
        size : 'normal',
        theme : 'light'
    });
}
 
var tag = $('').attr('src', 'https://www.google.com/recaptcha/api.js?onload=G_RECAPTCHA_CALL_BACK&render=explicit');
$('head').append(tag);

2. 발생이슈

2-1. ie9 에서 발생

2-2. 발생 에러

  • ReCAPTCHA placeholder element must be empty
  • 또는 Invalid ReCAPTCHA client id: undefined

3. 이슈 원인

3-1. ie9 에서 callback 이 2번 호출되는 현상 확인

4. 이슈 대응 코드


var hasRecaptcha = false;
function G_RECAPTCHA_CALL_BACK() {
    if (hasRecaptcha) {
        return;
    }
 
    hasRecaptcha = true;
    window.grecaptcha.render('recaptcha', {
        sitekey : 'SITE_KEY',
        size : 'normal',
        theme : 'light'
    });
}
 
var tag = $('').attr('src', 'https://www.google.com/recaptcha/api.js?onload=G_RECAPTCHA_CALL_BACK&render=explicit');
$('head').append(tag);

[javascript] ReCAPTCHA - IE9 Error ReCAPTCHA placeholder element mu... | Ecency