web-dev-qa-db-ja.com

reCAPTCHAを動的にロードする

以下のようなJavaScriptを使用してreCAPTCHAをロードする方法はいくつかあります。

<html>
  <head>
    <title>Loading captcha with JavaScript</title>
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
    <script type='text/javascript'>
    var captchaContainer = null;
    var loadCaptcha = function() {
      captchaContainer = grecaptcha.render('captcha_container', {
        'sitekey' : 'Your sitekey',
        'callback' : function(response) {
          console.log(response);
        }
      });
    };
    </script>
  </head>
  <body>
      <div id="captcha_container"></div>
      <input type="button" id="MYBTN" value="MYBTN">
      <script src="https://www.google.com/recaptcha/api.js?onload=loadCaptcha&render=explicit" async defer></script>
  </body>
</html>

このコードは、ページロード時にキャプチャをロードします。 「MYBTN」をクリックしたときにreCAPTCHAをロードしたい。したがって、コードは次のように変わります。

<html>
  <head>
    <title>Loading captcha with JavaScript</title>
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
    <script type='text/javascript'>
$('#MYBTN').on('click',function(){
    var captchaContainer = null;
    var loadCaptcha = function() {
      captchaContainer = grecaptcha.render('captcha_container', {
        'sitekey' : 'Your sitekey',
        'callback' : function(response) {
          console.log(response);
        }
      });
    };
 });
    </script>
  </head>
  <body>
      <div id="captcha_container"></div>
      <input type="button" id="MYBTN" value="MYBTN">
      <script src="https://www.google.com/recaptcha/api.js?onload=loadCaptcha&render=explicit" async defer></script>
  </body>
</html>

しかし、「MYBTN」をクリックしてもこのコードは機能せず、reCAPTCHAが読み込まれません。私を助けてください。ありがとう。

javascriptjqueryrecaptcha
11
Reza

LoadCaptcha（）を呼び出すだけです

$('#MYBTN').on('click',function(){
    var captchaContainer = null;
    var loadCaptcha = function() {
      captchaContainer = grecaptcha.render('captcha_container', {
        'sitekey' : 'Your sitekey',
        'callback' : function(response) {
          console.log(response);
        }
      });
    };
    loadCaptcha(); // THIS LINE WAS MISSING
 });
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
      <div id="captcha_container"></div>
      <input type="button" id="MYBTN" value="MYBTN">
      <script src="https://www.google.com/recaptcha/api.js?onload=loadCaptcha&render=explicit"></script>
12
Gavriel

簡単な状況

Html

<input type="button" id="MYBTN" value="create captcha"> 
<div id="captcha_container"></div>

[〜＃〜] js [〜＃〜]

var testSitekey = '6LeLzA4UAAAAANNRnB8kePzikGgmZ53aWQiruo7O';

$('#MYBTN').click(function() {
  $('body').append($('<div id="captcha_container" class="google-cpatcha"></div>'));
  setTimeout(function() {
    grecaptcha.render('captcha_container', {
      'sitekey': testSitekey
    });
  }, 1000);
});

オンラインデモ（jsfiddle）

7
Ali Soltani

埋め込みスクリプトでonloadについて説明しました。埋め込みスクリプトからonloadを削除するか、関数名loadCaptchaのonclickイベントの外にコードを保持するだけです。

1。最初のソリューション：

$('#MYBTN').on('click',function(){
    var captchaContainer = null;
    var loadCaptcha = function() {
      captchaContainer = grecaptcha.render('captcha_container', {
        'sitekey' : 'Your sitekey',
        'callback' : function(response) {
          console.log(response);
        }
      });
    }
 });

<script src="https://www.google.com/recaptcha/api.js?render=explicit"></script>

2。2番目のソリューション

<script type='text/javascript'>
    var captchaContainer = null;
    var loadCaptcha = function() {
      captchaContainer = grecaptcha.render('captcha_container', {
        'sitekey' : 'Your sitekey',
        'callback' : function(response) {
          console.log(response);
        }
      });
    };
 </script>
<script src="https://www.google.com/recaptcha/api.js?onload=loadCaptcha&render=explicit" async defer></script>

最初のソリューションでは、ボタンをクリックするとコードが機能します。 loadCaptcha関数に配置する必要がない場合でも、grecaptcha.renderを直接呼び出すことができます。

しかし、スクリプトタグでonloadに言及すると、クリックに従って機能しなくなり、スクリプトで言及したコールバック関数が見つかります。そして、スクリプトのonloadでloadCaptchaを記述し、onClickイベント内にこの関数を記述した。スクリプトタグが実行されると、コードは、スクリプトタグが実行されるまで（クリックイベントで初期化されるため）初期化されなかったloadCaptcha関数を見つけようとしました。そのため、スクリプトは機能していませんでした。

4
Nitin Raghav

[〜＃〜] js [〜＃〜]

// Loading captcha with JavaScript on button click
jQuery(document).ready(function ($) {
    $('#MYBTN').on('click',function() {
        $.getScript( "https://www.google.com/recaptcha/api.js?render=__YOUR_KEY__" )
        .done(function( script, textStatus ) {
            if(typeof grecaptcha !== "undefined") {
                grecaptcha.ready(function () {
                    grecaptcha.execute('__YOUR_KEY__', {
                        action: 'homepage'
                    })
                    .then(function (token) {
                        var recaptchaResponse = document.getElementById('captcha_container');
                        recaptchaResponse.value = token;
                    });

                    // Your other code here
                    // You can control captcha badge here
                });
            }
        });
    });
});

[〜＃〜] html [〜＃〜]

// Required HTML:
<body>
    <input type="button" id="MYBTN" value="MYBTN">
    <div id="captcha_container"></div>
</body>
2
Dmitriy Korytnyi

フォームの必須フィールドの1つがフォーカスされた後にのみ読み込まれるようにキャプチャを実装しました。また、CAPTCHAの依存関係が以前に挿入されたかどうかを確認するためのチェック変数も実装しました。

ここにあります：

jQuery('#MyRequiredInputId').focus(function () {
                if(typeof loadedRecaptcha != 'undefined'){
                    return;
                }
                jQuery.getScript("https://www.google.com/recaptcha/api.js?render=___YOURKEY__")
                    .done(function (script, textStatus) {
                        if (typeof grecaptcha !== "undefined") {
                            grecaptcha.ready(function () {
                            var siteKey = '___YOURKEY___';
                                jQuery('body').append(jQuery('<div id="captcha_container" class="google-cpatcha"></div>'));
                                setTimeout(function() {
                                    grecaptcha.render('captcha_container', {
                                        'sitekey': siteKey
                                    });
                                }, 1000);
                            });
                        }
                        loadedRecaptcha = true;
                    });
        });

私の場合、<div id= "captcha_container"></div>キャプチャを表示する場所。

結果：

enter image description here

0
Ricardo Martins