我正在研究一个需要在sweetalert弹出框中进行recaptcha验证的函数,但是我会收到以下错误:
未被发现的错误:recaptcha占位符元素必须是元素或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>
我试图用onload
触发器将genRecaptcha
函数放置,但似乎无法获取元素。
有什么方法可以在弹出框满载后执行该功能?还是我在这里做错了什么?
upd :这是实时演示:https://sweetalert2.github.io/recipe-gallery/recaptcha.html
这是SweetAlert2的解决方案 - sweetAlert的支撑叉:
function showSweetAlertRecaptcha() {
Swal.fire({
title: 'SweetAlert2 + Recaptcha',
html: '<div id="recaptcha"></div>',
willOpen: 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@11"></script>
问题通过使用jQuery的$(element).ready
而不是使用.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>