通过AJAX加载的页面上的reCAPTCHA字段无法加载.建议？

Question

实例:

• 没有AJAX
• 使用AJAX(点击发送电子邮件给我们)

当我查看源网页一切正常,但是当我通过AJAX请求负载,在验证码的地方应该是,我看到...

<noscript>
  <iframe src="http://www.google.com/recaptcha/api/noscript?k=6LfwkccSAAAAALr_z6vDBqkySowo5KIiR0mVM1BX" height="300" width="500" frameborder="0"></iframe><br/>
  <textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea>
  <input type="hidden" name="recaptcha_response_field" value="manual_challenge"/>
</noscript>

显然,除非我的用户已禁用JS,否则这不起作用.在此过程中不会抛出任何错误.

以非AJAX请求的速度查看代码,我看到......

<script type="text/javascript" src="http://www.google.com/recaptcha/api/challenge?k=6LfwkccSAAAAALr_z6vDBqkySowo5KIiR0mVM1BX"></script>

<noscript>
  <iframe src="http://www.google.com/recaptcha/api/noscript?k=6LfwkccSAAAAALr_z6vDBqkySowo5KIiR0mVM1BX" height="300" width="500" frameborder="0"></iframe><br/>
  <textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea>
  <input type="hidden" name="recaptcha_response_field" value="manual_challenge"/>
</noscript>

请注意脚本顶部的附加行,用于解决启用了JS的用户的问题.

所以我想问题是双重的.WTF正在发生,我该如何解决？

我发现了一些含糊的提到这个问题,但没有得到正确的答案.我发现了一些使用reCAPTCHA API的提法document.write,但我不知道这是否有效.如果我忽略了一些明显的东西,请随时指出.

根据请求,AJAX调用是......

$(document).ready(function() {
     $.get('/inc/email.php', 
           function(data){
                console.log('Get success!');
                $('#email-form').html(data);
                console.log('Get added to #email-form!');
                $('#email-form form').submit( function(){
                    $.ajax({
                      type: "POST",  
                      url: "/inc/email.php",  
                      data: $('#email-form form').serialize(),  
                      success: function() {
                            console.log('Submit success!');
                            $('#email-form').html(data);
                      }
                    });
                    return false;
                });
        }
     );
 });

到目前为止我尝试了什么:

• 重写代码以获取远程JS文件,将document.write()子句替换为我设置为特定ID的元素的附加,然后在页面上内联运行修改后的代码
• 显示没有插件的reCAPTCHA而不是PHP reCAPTCHA库

Answer 1

说明:

使用AJAX进行此操作时中断的原因是因为jQuery script在将其附加到DOM之前从HTML中删除任何标记,并在全局上下文中对其进行评估.它不会与HTML的其余部分一起插入DOM.

在你的代码中:

您的代码中的罪魁祸首就是这一行:

$('#email-form').html(data);

您将从服务器获取原始HTML字符串,并将其附加到DOM.但是,jQuery 首先script从data变量中删除标记,然后在全局上下文中对其进行评估.

由于recaptcha.js脚本用于document.write将其内容添加到DOM中,因此它会中断; document.write必须准确运行您想要输出HTML的位置.

解决方案:

有两种可能的解决方案.

解决方案#1:

您可以script使用vanilla JavaScript自行插入标记,而不是完全依赖jQuery ,这将导致document.write在您想要的地方运行 - 就在DOM中:

success: function() {
    var form = $('#email-form')[0],
        script = $('<script src="http://www.google.com/recaptcha/api/challenge?k=6LfwkccSAAAAALr_z6vDBqkySowo5KIiR0mVM1BX" />')[0];

    form.appendChild(script);
}

请注意[0]这些行的末尾.它们用于访问底层的本机DOM对象,因此我们可以使用DOM的本机appendChild.

解决方案#2:

不要通过AJAX加载数据,而是考虑将其放在自己的页面中,然后只需iframe在页面中插入:

success: function() {
    $('#email-form').html('<iframe src="path/to/reCAPTCHA/page.html" />');
}