ReCaptcha в FancyBox не работает

Question

Я пытаюсь получить Google ReCaptcha для загрузки в FancyBox AJAX плавали модальным У меня есть на моем сайте, но не могу получить элемент ReCaptcha появиться ...

Любые идеи, как сделать эту работу ?

Если изменить FancyBox открытый код для использования IFRAME он появляется, также, если я сделаю это INLINE, то это работает - но мне нужно работать в окне AJAX ...

HTML код, чтобы открыть окно FancyBox является:

<a class="various fancybox.ajax" href="reply.html"> 

код на странице reply.html Я попытался это основная нагрузка, а также явный подход в соответствии с:

<script type="text/javascript"> 
     var onloadCallback = function() { 
     grecaptcha.render('RecaptchaField1', { 
      'sitekey' : 'my_site_key' 
     }); 
     }; 
</script> 


<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" 
     async defer> 
    </script> 

Любые идеи FancyBox код:

<script type="text/javascript"> 
$(document).ready(function() { 
$(".various").fancybox({ 
    maxWidth : 900, 
    maxHeight : 630, 
    fitToView : false, 
    width  : '85%', 
    height  : '85%', 
    autoSize : false, 
    closeClick : false, 
    openEffect : 'none', 
    closeEffect : 'none', 
      padding   : 8 

,ajax: { 
    complete: function(jqXHR, textStatus) { 
     alert("ajax loaded - render recaptcha here") 

    } 
} 

}); 
}); 
</script> 

Answer 1

Bellow code работает для меня отлично.

1. Включить Google ReCaptcha апи JS

   <script src="https://www.google.com/recaptcha/api.js"></script> 
   

2. Добавить Элемент Html

   <div class="g-recaptcha" id="recaptcha" ></div> 
   

3. Add Script

   <script type="text/javascript"> 
       $(document).ready(function() { 
       $("[element_id_or_class]").fancybox({ 
        padding  : 0, 
        maxWidth : 800, 
        maxHeight : 600, 
        fitToView : false, 
        width  : 'auto', 
        height  : 'auto', 
        autoSize : true, 
        openEffect : 'none', 
        closeEffect : 'none',   
        ajax: { 
        complete: function(jqXHR, textStatus) { 
         grecaptcha.render('recaptcha', { 
          sitekey: [RECAPTCHA_SITE_KEY], 
          callback: function(response) { 
           console.log(response); 
          }   
         }); 
        } 
        } 
       }); 
   }); 
   </script>