代码之家 › 专栏 › 技术社区 › Ahmet

recaptcha在Vue组件中不起作用。给grecaptcha。未加载grecaptcha时,render不是函数

recaptcha vue.js javascript

Ahmet · 技术社区 · 6 年前

如何在Vue组件中添加grecaptcha onload方法。未加载grecaptcha时。渲染不是函数

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时正在工作。但为时已晚。

2 回复 | 直到 6 年前

FlameStorm 4 年前

上次更新了recaptcha脚本 2018年5月4日格林威治时间晚上9:07:30.349 (基于recaptcha脚本的时间戳)。grecaptcha正在加载,但是呈现函数有延迟,这就是为什么recaptcha没有显示在UI中( grecaptcha。渲染不是函数 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在评论中写道的固定条件,谢谢。

Philipp Mochine 6 年前

我发现,从两天前开始,很多人都犯了错误:

 grecaptcha.render is not a function

嗯,这对我有用。也许这对

我将其分解为和平,以便您可以轻松阅读:

mounted(){
    if (typeof grecaptcha === "undefined") {
        var script = document.createElement("script");
        script.src = "https://www.google.com/recaptcha/api.js?render=explicit";
        script.onload = this.renderWait;
        document.head.appendChild(script);
    } else this.render();
}

如果grecaptcha没有加载,我将创建一个脚本并等待加载。如果是,则调用renderWait

renderWait() {
        setTimeout(() => {
            if (typeof grecaptcha !== "undefined" && typeof grecaptcha.render !== "undefined")  this.render();
            else this.renderWait();
        }, 200);
},

当我们最终使用grecaptcha进行渲染时:

render() {
        const recaptchaDiv = document.createElement('div');
        recaptchaDiv.className = 'outside-badge';
        document.body.appendChild(recaptchaDiv);

        this.widgetId = grecaptcha.render(recaptchaDiv, {
            sitekey: this.sitekey,
            size: "invisible",
            badge: this.badge || "bottomright",
            theme: this.theme || "light",
            callback: token => {
                this.callback(token);
                grecaptcha.reset(this.widgetId);
            }
        });
        this.loaded = true;
 },

也许这对你有帮助:)