For the English version of this article, please look here.

Das Problem: man möchte reCaptcha über die JS (JavaScript) oder php-Api in einen durch den jQuery-Befehl ajax() eingefügten Bereich verwenden. Aber: das reCaptcha taucht nicht auf.

Mein Use-Case sah so aus:

kontakt.html (auszug):

<div id="form"></div>
<script>$("#form").load("mail.php?ajax");</script>

mail.php (auszug): 

<?php
// here is other code
echo '<script type="text/javascript" src="https://www.google.com/recaptcha/api/js/recaptcha_ajax.js"></script><div id="recaptcha"></div>';
echo '<script>Recaptcha.create("my_public_key", "recaptcha", {theme: "red"});</script>';
// other code
?>

 Und das funktioniert, wie bereits erwähnt, nicht.

Das Problem:
googles reCaptcha-Api verwendet zum Einfügen des Objekts das document.write(), was an dieser Stelle im Dokumentenbaum durch die Verwendung von jQuery nicht verfügbar ist. Die Lösung ist „denkbar“ einfach. Googles document.write muss durch einen jQuery-Befehl ersetzt werden.

Das heißt, mann muss entweder eine eigene Version der Api maintainen, oder man arbeitet dynamisch. Bei uns sah die Lösung konzeptionell so aus:

mail.php (auszug): 

echo '<script type="text/javascript" src="jsapi.php"></script><div id="recaptcha"></div>';

jsapi.php (vollständig):

<?php
$api = file_get_contents('https://www.google.com/recaptcha/api/js/recaptcha_ajax.js');
$api = str_replace('document.write','$("body").append',$api);
echo $api;
?>

Die Ersetzung manuell vorzunehmen ist höchst trivial, darum habe ich jetzt keine geänderte recaptcha_ajax.js angehängt. Insgesamt könnte man an den headern noch etwas machen, dass das Caching-Verhalten des Browsers korrekt wird, das war aber nicht Fokus.

[ad name=“Google Adsense-1 small horizontal“]