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

in #recaptcha7 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);

Sort:  

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!