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 不是一个函数 n)。可能的解决方法是在尝试加载 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 在评论中所写的条件，谢谢。

关于javascript - recaptcha 在 Vue 组件中不起作用。当 grecaptcha 未加载时，给 grecaptcha.render 不是一个函数，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/50158132/