如何在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 时正在工作。但是为时已晚。
最佳答案
recaptcha 脚本最后更新于 2018 年 5 月 4 日 9:07:30.349 PM GMT(基于 recaptcha 脚本的时间戳)。 grecaptcha 正在加载,但是渲染函数有延迟,这就是 recaptcha 没有显示在 UI 中的原因(grecaptcha.render 不是一个函数n)。可能的解决方法是在尝试加载 recaptcha 之前验证 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 在评论中所写的条件,谢谢。
关于javascript - recaptcha 在 Vue 组件中不起作用。当 grecaptcha 未加载时,give grecaptcha.render 不是函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50158132/