驗證碼中的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不工作

回答

相關問題