Question

我正在尝试将Google ReCaptcha加载到我的网站上的fancybox AJAX浮动模式中，但无法显示ReCaptcha元素...

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

如果我更改了fancybox打开代码以使用IFRAME，那么同样如果我将其设置为INLINE则可以正常工作 - 但是我需要它在AJAX窗口中工作...

打开fancybox窗口的HTML代码是：

<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代码对我来说很好。

包括Google 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>

Fancybox中的ReCaptcha不起作用

1 个答案: