Google reCaptcha в сладкой ошибке предупреждения - PullRequest
Новая
       9

Google reCaptcha в сладкой ошибке предупреждения

0 голосов
/ 25 апреля 2018

Я работаю над функцией, требующей проверки reCaptcha с всплывающим окном «Сладкое оповещение», но ошибка составляет

Uncaught Error: reCAPTCHA placeholder element must be an element or id

Я искал причину этой ошибки,и я заметил, потому что элемент еще не был загружен при попытке создать элемент reCaptcha, 

function confirmBox() {
    var div = document.createElement('div');
    div.id = 'recaptcha';
    div.onload = genRecaptcha();

    swal({
        title: "Are you sure?",
        content: div,
        icon: "warning",
        buttons: true,
        dangerMode: true,
    })
}

function genRecaptcha() {
    console.log($('#recaptcha').attr('id'));
    grecaptcha.render('recaptcha', {
        'sitekey': '6Le2ZFUUAAAAAEV4IM_5weEnXg4gVplan2Atgiaj'
    });
}

$('#btn1').click(confirmBox);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<script src="https://www.google.com/recaptcha/api.js"></script>

<button id="btn1">Submit</button>

Я пытаюсь поставить функцию genRecaptcha с триггером onload, но, похоже, не смог получить элемент.

Есть ли способ выполнить функцию после полной загрузки всплывающего окна?или что-то здесь я сделал неправильно.

Любая помощь в этом будет оценена.Благодаря.

Ответы [ 2 ]

0 голосов
/ 26 апреля 2018

Вот решение с SweetAlert2 - поддерживаемой вилкой SweetAlert: 

function showSweetAlertRecaptcha() {
  Swal.fire({
    title: 'SweetAlert2 + Recaptcha',
    html: '<div id="recaptcha"></div>',
    onOpen: function() {
      grecaptcha.render('recaptcha', {
        'sitekey': '6LdvplUUAAAAAK_Y5M_wR7s-UWuiSEdVrv8K-tCq'
      });
    }, 
    preConfirm: function () {
      if (grecaptcha.getResponse().length === 0) {
        swal.showValidationMessage(`Please verify that you're not a robot`)
      }
    }
  })
}
#recaptcha > div {
  width: auto !important;
  margin-bottom: .5em;
}
<script src="https://www.google.com/recaptcha/api.js?onload=showSweetAlertRecaptcha"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script>
0 голосов
/ 26 апреля 2018

Решение проблемы с использованием $(element).ready из jquery вместо использования .onload

приведенный ниже фрагмент кода не сможет работать должным образом из-заключ сайта recaptcha недействителен для этого сайта 

function confirmBox() {
    var div = document.createElement('div');
    div.id = 'recaptcha';
    $('#recaptcha').ready(function () {
        console.log($('#recaptcha').attr('id'));
        grecaptcha.render('recaptcha', {
            'sitekey': '6Le2ZFUUAAAAAEV4IM_5weEnXg4gVplan2Atgiaj'
        });
    })

    swal({
        title: "Are you sure?",
        content: div,
        icon: "warning",
        buttons: true,
        dangerMode: true,
    })
}

$('#btn1').click(confirmBox);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<script src="https://www.google.com/recaptcha/api.js"></script>

<button id="btn1">Submit</button>
...