如何在Vue组件中添加grecaptcha onload方法。当未加载时grecaptcha.render不是一个函数
const script = document.createElement("script");
script.src = `${URL}?render=explicit&hl=TR`;
script.async = true;
script.defer = true;
document.body.appendChild(script);
this.initReCaptcha();
initReCaptcha: function () {
setTimeout(function () {
if (typeof grecaptcha === 'undefined') {
this.initReCaptcha();
} else {
grecaptcha.render('recaptcha', {
sitekey: 'XXXX',
callback: this.submit,
'expired-callback': this.expired
});
}
}.bind(this), 100);
}
当我设置超时 1000 时,它正在工作。但为时已晚。
验证码脚本最后更新了2018 年 5 月 4 日晚上 9:07:30.349(格林威治标准时间)(基于 recaptcha 脚本的时间戳)。 grecaptcha 正在加载,但是渲染函数有延迟,这就是 recaptcha 没有显示在 UI 中的原因(grecaptcha.render 不是一个函数n).可能的解决方法是验证render尝试加载验证码之前的函数。
这是修复方法:
initReCaptcha: function () {
setTimeout(function () {
if (typeof grecaptcha === 'undefined' || typeof grecaptcha.render ==='undefined') {
this.initReCaptcha();
} else {
grecaptcha.render('recaptcha', {
sitekey: 'XXXX',
callback: this.submit,
'expired-callback': this.expired
});
}
}.bind(this), 100);
}
我希望它能帮助你。干杯
** 已修复 qRoC 在评论中所写的条件,谢谢。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)