SweetAlert提示中的Google reCaptcha

Posted 2021-04-13

我正在使用一个功能，该功能需要使用一个甜美的警报弹出框来进行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触发器一起使用，但似乎无法获取该元素。

弹出框完全加载后，有什么方法可以执行功能？或这里我做错了什么。

对此将提供任何帮助。谢谢。

我正在使用一个函数，该函数需要使用一个甜美的警报弹出框来进行reCaptcha验证，但是它遇到了Uncaught Error的错误：reCAPTCHA占位符元素必须是我曾经使用过的元素或ID ...

答案

这是SweetAlert2的解决方案-SweetAlert支持的分支：

另一答案

使用$(element).ready中的jquery代替.onload来解决问题