验证码中的fancybox不工作

我试图让谷歌的reCAPTCHA要装入的fancybox AJAX浮动模式我有我的网站，但不能让出现在reCAPTCHA的元素...验证码中的fancybox不工作

任何想法如何使这项工作？

如果我改变的fancybox开放代码使用它似乎IFRAME，同样的，如果我让INLINE然后它的作品 - 但我需要它在AJAX窗口工作...

HTML代码来打开的fancybox窗口方法是：在reply.html页我试图

<a class="various fancybox.ajax" href="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>

来源

2016-02-05 dubbs

您的ajax加载成功并完成后，您可能需要动态加载您的recaptcha。 – colecmc

谢谢 - 关于如何做的任何代码提示？ – dubbs

请参阅此页面以获得代码片段。 http://stackoverflow.com/questions/33473108/check-google-recaptcha-service-is-on-or-off/33512289#33512289 - 正如我之前所说，当你的Ajax请求成功完成时，使用'getScript'功能与您的recaptcha网址。然后，继续进行任何初始化。 – colecmc

贝娄代码对我来说工作正常。

包括谷歌的Recaptcha API JS

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

添加元素的Html

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

添加脚本

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

来源

2017-11-09 10:58:44 Suman

验证码中的fancybox不工作

回答

相关问题