Загрузите reCAPTCHA динамически

2

Существует несколько способов загрузки reCAPTCHA с помощью javascript, например, ниже:

<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>

Этот код загружается с помощью pageload. Я хочу загрузить reCAPTCHA только при нажатии на "MYBTN". Таким образом, код изменяется на:

<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 не загружается. Помогите мне плз. Благодарю.

Теги:
recaptcha

3 ответа

6

Вам просто нужно вызвать 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>
  • 0
    почему у меня не работает на warcraft-fans.ir/reza/i.html
  • 0
    потому что вы смешали 2 версии, которые находятся в вашем вопросе. Вы сказали, что у вас есть рабочая версия для загрузки, и попросили версию, которая загружается только по клику. Код, который вы используете на своем сайте, теперь загружается при загрузке. Вам нужно изменить полную часть JS на то, что в моем ответе (вещь onclick ...)
3

Простая ситуация

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)

  • 0
    Спасибо, это было полезно!
1

Вы только что упомянули onload в своем встроенном скрипте. Либо вы просто удалите onload из встроенного скрипта или просто сохраните свой код вне события onclick в имени функции loadCaptcha.

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. Второе решение

<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 в своем теге скрипта, то он не будет работать в соответствии с вашим кликом, тогда он найдет функцию обратного вызова, упомянутую в скрипте. И как вы написали loadCaptcha в загрузке скрипта, и вы написали эту функцию внутри события onClick. Когда тег сценария выполнен, код попытался найти функцию loadCaptcha, которая не была инициализирована до тех пор, пока тег скрипта не будет выполнен (как он будет инициализироваться при событии клика). Таким образом, ваш скрипт не работал.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню