私の<body>
<div class="g-recaptcha" data-sitekey="some-key (original is right)">
これは私の<head>
<script src="//www.google.com/recaptcha/api.js"></script>
しかし、FirefoxでもChromeでも何も表示されません...これは既知の問題ですか?
<script src="//www.google.com/recaptcha/api.js"></script>
は、headタグを閉じる前の最後のものです。それは私のために同じ問題を修正しました
この障害にぶつかっただけで、私の場合はAngularJSによるものでした。 Angularに限らず、ページの読み込み後に要素をバインドするライブラリは、Googleのコードが実行されるまで要素が存在しないため、Google reCAPTCHAが表示されない可能性があります。
これを解決するには、まずレンダリングを明示的に行い、reCAPTCHAがロードされたときに実行する関数を提供します。
<script src='https://www.google.com/recaptcha/api.js?onload=recaptchaOnload&render=explicit' async defer></script>
次に、一意のIDをコンテナに追加します。
<div id="recaptcha" class="g-recaptcha" data-sitekey="site key here"></div>
次に、カスタム関数で要素が実際に存在するのを待ちます:
var _captchaTries = 0;
function recaptchaOnload() {
_captchaTries++;
if (_captchaTries > 9)
return;
if ($('.g-recaptcha').length > 0) {
grecaptcha.render("recaptcha", {
sitekey: 'site key here',
callback: function() {
console.log('recaptcha callback');
}
});
return;
}
window.setTimeout(recaptchaOnload, 1000);
}
これは、要素が見つかるまで10秒間試行し続け、それからreCAPTCHAをレンダリングします。
Ad-Block PlusやuBlock Originなど、ブラウザでコンテンツブロッカーがアクティブになっていないことを確認してください。
これらを無効にして、ページを更新し、フォームを再度送信してください。
私が抱えていた問題は、ほとんどの時間を表示していたことですが、表示されない場合があり、表示するにはフォームを送信する必要があります(検証をトリガーします)。スクリプトタグに?render=explicit
を追加すると、修正されました。
<script src="https://www.google.com/recaptcha/api.js?render=explicit" async defer></script>
https://developers.google.com/recaptcha/docs/display#explicit_render