通过AJAX加载的页面上的reCAPTCHA字段未加载.有什么建议吗? [英] reCAPTCHA field on page that is loaded through AJAX doesn't load. Suggestions?
问题描述
实时示例:
- Without AJAX
- With AJAX (click Email Us link)
当我查看源页面时，一切工作正常，但是当我通过AJAX请求加载时，在应该
When I view the source page everything works fine, but when I load through an AJAX request, in the place where the reCAPTCHA should be, I see...
<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，否则它什么也不做.在此过程中，不会引发任何错误.
Obviously, this does nothing unless my user has JS disabled. During this process no errors are thrown.
以非AJAX要求的速度查看代码，我看到了...
Viewing the code on the non-AJAX-requested pace, I see...
<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的用户.
Note the additional line at the top of the script that addresses users with JS enabled.
所以我想这个问题有两个方面. WTF正在发生，我该如何解决?
So I guess the question is two-fold. WTF is happening and how can I fix it?
我发现这个问题含糊其辞，但没有合适的答案.我发现使用document.write提到了reCAPTCHA API，但我不知道这是否有效.如果我忽略了明显的内容，请随时指出.
I've found some vague mention of this issue, but no decent answers. I found some mention of the reCAPTCHA API using document.write, but I don't know if that's valid. If I've overlooked something obvious, please feel free to point it out.
每个请求的AJAX调用是...
Per request, the AJAX call is...
$(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;
});
}
);
});
到目前为止我尝试过的事情:
What I've tries so far:
- 重写代码以获取远程JS文件，用我设置为特定ID的元素的追加替换document.write()子句，然后在页面上内联运行修改后的代码
- 显示不带插件的reCAPTCHA 而不是
- Rewriting the code to fetch the remote JS file, replace the document.write() clause with an append to the element I set to a specific ID, then run the modified code inline on the page
- Displaying reCAPTCHA Without Plugins instead of the PHP reCAPTCHA library
推荐答案
说明:
Explanation:
The reason this breaks when doing it with AJAX, is because jQuery strips out any script tags from your HTML before appending it to the DOM, and evaluates it in the global context. It does not insert it into the DOM together with the rest of your HTML.
代码中的罪魁祸首是这一行:
The culprit in your code is this line:
$('#email-form').html(data);
您要从服务器接收原始HTML字符串，并将其附加到DOM.但是，jQuery 首先从data变量中删除script标记，然后在全局上下文中对其进行评估
You're taking the raw HTML string recieved from the server, and appending it to the DOM. However, jQuery first removes the script tag from your data variable, and evaluate that in the global context.
由于recaptcha.js脚本使用document.write将其内容添加到DOM中，因此它会中断； document.write必须在要输出HTML的确切位置运行.
Since the recaptcha.js script uses document.write to add its stuff to the DOM, it breaks; document.write has to run exactly where you want it to output the HTML.
有2种可能的解决方案.
There are 2 possible solutions.
您可以使用香草JavaScript自己插入script标记，而不是完全依赖jQuery，这将导致document.write在您想要的位置运行-就在DOM中:
Instead of relying on jQuery completely, you could insert the script tag yourself using vanilla JavaScript, which will cause the document.write to run where you want it to - right there in the 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.
Note the [0] at the end of those lines. They're used to access the underlying native DOM object, so that we can use the DOM's native appendChild.
考虑通过单独的页面，然后将iframe插入页面，而不是通过AJAX加载数据:
Instead of loading the data through AJAX, consider putting it in a page of its own, and then just insert an iframe into your page:
success: function() {
$('#email-form').html('<iframe src="path/to/reCAPTCHA/page.html" />');
}
这篇关于通过AJAX加载的页面上的reCAPTCHA字段未加载.有什么建议吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
