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

in recaptcha •  7 years ago  (edited)

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);

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!
Sort Order:  

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!

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!