javascript - recaptcha 在 Vue 组件中不起作用。当未加载 grecaptcha 时,grecaptcha.render 不是函数
问题描述
如何在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 不是一个函数)。可能的解决方法是在尝试加载 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 在评论中所写的情况,谢谢。
推荐阅读
- linux - php7.2-bcmath (Debian Jessie) - 安装问题
- javascript - 下载 D3.js SVG 时保留 CSS 样式(填充渐变、字体)
- java - 使用 API REST 接口对 android 应用上的用户进行身份验证
- python - Django ValueError(视图 views.save_flow_data 没有返回 HttpResponse 对象。它返回了 None 。)
- ios - 使 ScrollView 中的滚动条在 SwiftUI 中始终可见
- c# - 如何使用 C# 或 Microsoft Graph 检查列表 Sharepoint 中添加的新项目
- android - 键盘关闭时来自 API 重置的颤动文本字段值
- assembly - 与屏幕上的其他元素组合打印
- microsoft-graph-api - 使用 Microsoft Graph API 向有效电子邮件地址授予权限时收到错误代码“noResolvedUsers”的 400 错误请求
- solr - Solr /更新处理程序