Живые примеры:
Когда я просматриваю исходную страницу, все работает нормально, но когда я загружаю запрос 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 происходит и как я могу это исправить?
Я нашел какое-то неопределенное упоминание об этой проблеме, но никаких достойных ответов. Я нашел некоторое упоминание о 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; }); } ); });
Что я до сих пор пытаюсь сделать:
Причина, по которой это происходит при использовании AJAX, заключается в том, что jQuery удаляет любые теги script из вашего HTML перед добавлением его в DOM и оценивает его в глобальном контексте . Он не вставляет его в DOM вместе с остальной частью вашего HTML.
Виной в вашем коде является эта строка:
$('#email-form').html(data);
Вы берете необработанную строку HTML, полученную с сервера, и добавляете ее в DOM. Однако jQuery сначала удаляет тег script из вашей переменной data и оценивает это в глобальном контексте.
Поскольку скрипт recaptcha.js использует document.write для добавления своих данных в DOM, он ломается; document.write должен работать точно там, где вы хотите, чтобы он выводил HTML.
Существует 2 возможных решения.
Вместо того, чтобы полностью полагаться на jQuery, вы можете вставить сам script тег, используя ванильный JavaScript, что приведет к тому, что 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, поэтому мы можем использовать родной appendChild DOM.
Вместо того, чтобы загружать данные через AJAX, подумайте о том, чтобы поместить его на собственную страницу, а затем просто вставьте iframe на свою страницу:
success: function() { $('#email-form').html('<iframe src="path/to/reCAPTCHA/page.html" />'); }
вы можете повторить все в файле /inc/email.php ! Вам нужно будет указать все необходимые файлы заранее.