获取不可见的 recaptcha 以在页面加载时触发

getting invisible recaptcha to trigger on page load

我正在尝试制作一个简单的页面来执行不可见的 recaptcha 检查，如果成功，则会提醒收到的令牌。尽管进行了几次尝试，但我没有使它起作用。我做了一个最小的例子：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
    <script type="text/javascript">
        var recaptchaCallback = function(token) {
            alert(token);
        };
    </script>
    <div class='g-recaptcha' data-sitekey='MY_KEY' data-callback='recaptchaCallback' data-size='invisible'></div>
    <script src="//www.google.com/recaptcha/api.js" async defer></script>
    <script type="text/javascript">
        $(document).ready(function(){
            grecaptcha.execute();
        });
    </script>
</body>
</html>

javascript 引擎错误说 "grecaptcha is not defined"。如果我用

替换该行

setTimeout(function() {grecaptcha.execute();}, 1000);

然后程序按预期运行，但是非常不稳定。我如何告诉 jQuery 实际等待 google recaptcha 代码完全加载？

我目前使用

绕过了这个问题

var ticker = setInterval(function(){
    try{
        grecaptcha.execute();
        clearInterval(ticker);
    } catch(e) {}
},100);

但如果有人有更优雅的解决方案，我仍然欢迎听到它。