scrobble.life
#recaptcha

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

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 = $('<script/>').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 = $('<script/>').attr('src', 'https://www.google.com/recaptcha/api.js?onload=G_RECAPTCHA_CALL_BACK&render=explicit');
$('head').append(tag);

Comments · 2

  • @steemitboard(66)· 2753d

    Congratulations @nonoll! You received a personal award!

    Happy Birthday! - You are on the Steem blockchain for 1 year!

    Click here to view your Board

    Do not miss the last post from @steemitboard:

    Valentine challenge - Love is in the air!

    Support SteemitBoard's project! Vote for its witness and get one more award!

  • @steemitboard(66)· 3104d

    Congratulations @nonoll! You have completed some achievement on Steemit and have been rewarded with new badge(s) :

    You published your First Post You got a First Vote

    Click on any badge to view your own Board of Honor on SteemitBoard. For more information about SteemitBoard, click here

    If you no longer want to receive notifications, reply to this comment with the word STOP

    Upvote this notification to help all Steemit users. Learn why here!