recaptcha 在 Vue 组件中不起作用.给 grecaptcha.render 在未加载 grecaptcha 时不是函数 [英] recaptcha doesn't work in Vue component.give grecaptcha.render is not a function when grecaptcha not loaded
问题描述
如何在Vue组件中添加grecaptcha onload方法.未加载时grecaptcha.render不是函数
how to add grecaptcha onload method in Vue component.when not loaded grecaptcha.render is not a function
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 时正在工作.但为时已晚.
is working when i set the timeout 1000.but it's too late.
推荐答案
recaptcha 脚本已于去年 May 4, 2018 9:07:30.349 PM GMT 更新(基于 recaptcha 脚本的时间戳).grecaptcha 正在加载,但是渲染函数有延迟,这就是为什么在 UI 中没有显示 recaptcha(grecaptcha.render 不是函数n).可能的解决方法是在尝试加载 recaptcha 之前验证 render 函数.
The recaptcha script was updated last May 4, 2018 9:07:30.349 PM GMT (based on the timestamp of the recaptcha script). The grecaptcha is being loaded, however the render function has a delay that is why the recaptcha is not being displayed in the UI (grecaptcha.render is not a function). The possible fix is to validate the render function before attempting to load the recaptcha.
修复方法如下:
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 在评论中所写的条件,谢谢.
这篇关于recaptcha 在 Vue 组件中不起作用.给 grecaptcha.render 在未加载 grecaptcha 时不是函数的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!