javascript - 引用错误: grecaptcha is undefined in chrome

Question

我在同一个表单上有两个验证码。一个在提交上，另一个在表单提交后打开的模式上。所以我在阅读了这里的许多答案后渲染了它。现在它可以在 mozilla 上正常工作，但在 chrome 中给出引用错误。

我的谷歌API是:

<script src='https://www.google.com/recaptcha/api.js'></script>

然后我的代码在 java 脚本中呈现它:

$('.g-recaptcha').each(function(index, el) {
        widgetId = grecaptcha.render(el, {'sitekey' : 'My-SITE-KEY'});
});

我的 html 读起来是这样的

<div id="user_recaptcha" class="reCaptcha">
    <div id="e_Captcha" class="g-recaptcha" data-sitekey="<?php echo SITE_KEY; ?>" data-callback="recaptchaCallbackEvent"></div>
</div>

我在 js 顶部声明 widgetId。

Answer 1

Recaptcha 有一个 onload 回调，它将在加载 recaptcha 后运行。将您的代码放入该回调函数中。

https://developers.google.com/recaptcha/docs/display

//call this function in your js
function onloadCallback() {
    $('.g-recaptcha').each(function(index, el) {
        widgetId = grecaptcha.render(el, {'sitekey' : 'My-SITE-KEY'});
    });
}

//load this script before your js is loading
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"></script>
//your html is absolutely fine.