Question

实例：

当我查看源页面时，一切正常，但是当我通过AJAX请求加载时，在reCAPTCHA 应该的地方，我看到......

<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正在发生，我该如何解决？

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

根据请求，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的元素的附加，然后在页面上内联运行修改后的代码
Displaying reCAPTCHA Without Plugins代替PHP reCAPTCHA library

Answer 1

说明：

使用AJAX进行此操作时中断的原因是jQuery strips out any script tags from your HTML before appending it to the DOM, and evaluates it in the global context。它不会与HTML的其余部分一起插入DOM。

在您的代码中：

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

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

您正在从服务器获取原始HTML字符串，并将其附加到DOM。但是，jQuery first removes the script tag from your data variable，并在全局上下文中对其进行评估。

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

解决方案：

有两种可能的解决方案。

解决方案＃1：

您可以使用vanilla JavaScript自行插入script标记，而不是完全依赖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" />');
}

Answer 2

您可以回显 /inc/email.php 文件中的所有内容！您必须提前包含所有必要的文件。

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

2 个答案:

说明：

在您的代码中：

解决方案：

解决方案＃1：

解决方案＃2：